hrms-mgt/src/modules/17_acting/views/main.vue
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 aa53326bbf fix: set pagination to defult
2026-02-13 13:50:44 +07:00

787 lines
26 KiB
Vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import {
checkPermission,
checkPermissionList,
checkPermissionCreate,
} from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useActingStore } from "@/modules/17_acting/store/Main";
import { useStructureTree } from "@/stores/structureTree";
import { usePagination } from "@/composables/usePagination";
/** importType*/
import type { QTableProps } from "quasar";
import type {
DataTree,
PosMaster,
ListPerson,
} from "@/modules/17_acting/interface/response/Main";
import LoadView from "@/components/LoadView.vue";
import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue";
/** use*/
const $q = useQuasar();
const { fetchTreeActing } = useStructureTree();
const storeTree = useStructureTree();
const storeActing = useActingStore();
const {
showLoader,
hideLoader,
messageError,
success,
dialogRemove,
dialogConfirm,
onSearchDataTable,
} = useCounterMixin();
const { pagination, params, onRequest } = usePagination("", fetchPosMaster);
/** โครงสร้าง*/
const expanded = ref<Array<string>>([]);
const filter = ref<string>("");
const nodeTree = ref<DataTree[]>([]);
const posmasterId = ref<string>("");
const isAll = ref<boolean>(false);
const modalCommand = ref<boolean>(false);
const isAllRoot = ref<boolean>(false);
/**
* function เรียกข้อมูลโครงสร้าง แบบปัจุบัน
*/
async function fetchOrganizationActive() {
if (storeTree.dataActing.length > 0) {
nodeTree.value = await fetchTreeActing("");
} else {
showLoader();
await http
.get(config.API.activeOrganization)
.then(async (res) => {
const data = res.data.result;
if (data) {
nodeTree.value = await fetchTreeActing(data.activeId);
}
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
}
const isLaod = ref<boolean>(false);
/**
* function เลือกตำแหน่งที่จะให้ษาการ
* @param data ข้อมูลตำแหน่ง
*/
async function updateSelected(data: PosMaster) {
isLaod.value = true;
posmasterId.value = data.posmasterId;
storeActing.rootId = data.orgTreeId;
pagination.value.page = 1;
pagination.value.rowsNumber = 10;
// เรียกใช้ function fetch รายชื่อ ,fetch รายชื่อรักษาการ
await Promise.all([fetchPosMaster(), fetchListAct()]).finally(() => {
isLaod.value = false;
});
}
/** ตำแหน่ง*/
const rowPosition = ref<ListPerson[]>([]);
const dataPosition = ref<ListPerson[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: false,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ-นามสกุล",
field: "name",
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
sortable: false,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posNo",
align: "left",
label: "เลขที่ตำแหน่ง",
sortable: false,
field: "posNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: false,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posType",
align: "left",
label: "ตำแหน่งประเภท",
sortable: false,
field: "posType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posLevel",
align: "left",
label: "ระดับ",
sortable: false,
field: "posLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const keyword = ref<string>("");
/**function fetch รายชื่อ*/
async function fetchPosMaster() {
await http
.post(config.API.orgPosAct + `/search`, {
...params.value,
// keyword: keyword.value.trim(),
posmasterId: posmasterId.value,
isAll: isAll.value,
isAllRoot: isAllRoot.value,
})
.then((res) => {
const result = res.data.result;
pagination.value.rowsNumber = result.total;
rowPosition.value = result.data;
dataPosition.value = result.data;
})
.catch((err) => {
messageError($q, err);
});
}
/**
* function แสดงตำแหน่งทั้งหมด
* @param val แสดงตำแหน่งทั้งหมด
*/
function updateIsAll(val: boolean) {
isAll.value = val;
pagination.value.page = 1;
fetchPosMaster();
}
function updateIsAllRoot(val: boolean) {
pagination.value.page = 1;
isAllRoot.value = val;
fetchPosMaster();
}
/**
* function เลือกราชชื่อรักษาการ
* @param data ข้อมูลรายชื่อ
*/
function selectPosition(data: ListPerson) {
showLoader();
http
.post(config.API.orgPosAct, {
posMasterId: posmasterId.value,
posMasterChildId: data.id,
})
.then(async () => {
await Promise.all([fetchPosMaster(), fetchListAct()]);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/********** รายชื่อคนรักษาการ **************/
const rowListPerson = ref<ListPerson[]>([]);
const dataListPerson = ref<ListPerson[]>([]);
const keywordAct = ref<string>("");
/** function fetch รายชื่อรักษาการ*/
async function fetchListAct() {
await http
.get(config.API.orgPosAct + `/${posmasterId.value}`)
.then((res) => {
const data = res.data.result;
rowListPerson.value = data;
dataListPerson.value = data;
})
.catch((err) => {
messageError($q, err);
});
}
/**
* funcion เลือกลำดับรายชื่อรักษาการ
* @param type up,down
* @param id รายชื่อรักษาการ
*/
function onSwapPerson(type: string, id: string) {
showLoader();
http
.get(config.API.orgPosAct + `/swap/${type}/${id}`)
.then(async () => {
await fetchListAct();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* function ลบรายชื่อรักษาการ
* @param id ชื่อรักษาการ
*/
function onDelete(id: string) {
dialogRemove($q, () => {
showLoader();
http
.delete(config.API.orgPosAct + `/${id}`)
.then(async () => {
// เรียกใช้ function fetch รายชื่อ ,fetch รายชื่อรักษาการ
await Promise.all([fetchPosMaster(), fetchListAct()]);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
async function getWorkFlow() {
if (storeActing.isOfficer == null && storeActing.isStaff == null) {
await http
.get(config.API.workflowKeycloakSystem("SYS_ACTING"))
.then((res) => {
const data = res.data.result;
storeActing.isOfficer = data.isOfficer;
storeActing.isStaff = data.isStaff;
})
.catch((e) => {
messageError($q, e);
});
}
}
function onSearchRowPosition() {
pagination.value.page = 1;
fetchPosMaster();
}
function onSearchListPerson() {
rowListPerson.value = onSearchDataTable(
keywordAct.value,
dataListPerson.value,
columns.value ? columns.value : []
);
}
function actActive(id: string, orgName: string) {
// confirm dialog active acting
dialogConfirm(
$q,
() => {
showLoader();
http
.post(config.API.activeActPosition(id), {
activeId: id,
})
.then(async () => {
success($q, "กำหนดรักษาการในตำแหน่งสำเร็จ");
await fetchOrganizationActive();
posmasterId.value = "";
storeActing.rootId = "";
rowPosition.value = [];
rowListPerson.value = [];
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
},
`ยืนยันการกำหนดรักษาการในตำแหน่ง`,
`คุณต้องการกำหนดรักษาการในตำแหน่งของ${orgName} ใช่หรือไม่?`
);
}
onMounted(async () => {
try {
showLoader();
await Promise.all([fetchOrganizationActive(), getWorkFlow()]);
} catch (error) {
messageError($q, error);
} finally {
hideLoader();
}
});
</script>
<template>
<div
class="toptitle text-dark col-12 row items-center"
style="margin-bottom: 0"
>
กษาการในตำแหน
<q-space />
<q-btn
class="q-px-sm"
v-if="
storeActing.isOfficer &&
checkPermissionList(['COMMAND']) &&
checkPermissionCreate('COMMAND')
"
dense
flat
round
color="primary"
icon="mdi-account-arrow-right"
@click.prevent="modalCommand = true"
>
<q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
</q-btn>
</div>
<q-card style="height: 100%">
<q-card-section :horizontal="$q.screen.gt.sm">
<!-- โครงสร้าง -->
<q-card-section class="col-lg-3 col-md-4 col-xs-12 q-gutter-sm q-pa-sm">
<div>
<q-input dense outlined v-model="filter" label="ค้นหา">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</div>
<div class="bg-white tree-container q-pa-xs">
<q-tree
class="q-pa-sm q-gutter-sm"
dense
:nodes="nodeTree"
node-key="orgTreeId"
label-key="labelName"
:filter="filter.trim()"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
v-model:expanded="expanded"
>
<template v-slot:default-header="prop">
<q-item
clickable
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
<q-icon
v-if="
prop.node.orgLevel === 0 &&
checkPermission($route)?.attrOwnership == 'OWNER'
"
name="mdi-content-save-edit"
color="blue"
@click.stop="
actActive(prop.node.orgTreeId, prop.node.orgTreeName)
"
size="xs"
><q-tooltip> บันทึกการกำหนดรักษาการ </q-tooltip></q-icon
>
</div>
<div class="text-weight-light text-grey-8">
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
</div>
</q-item>
</template>
<template v-slot:default-body="prop">
<div v-if="prop.node.posMaster">
<q-list dense v-for="col in prop.node.posMaster">
<q-item
:clickable="checkPermission($route)?.attrIsGet"
:active="posmasterId == col.posmasterId"
:class="posmasterId !== col.posmasterId ? 'text-info' : ''"
active-class="my-list-link text-primary text-weight-medium"
@click.stop="updateSelected(col)"
>
<q-item-section>
{{
`${col.posNo} ${
col.fullNameCurrentHolder
? " (" + col.fullNameCurrentHolder + ")"
: "ว่าง"
}`
}}
</q-item-section>
</q-item>
</q-list>
<div></div>
</div>
</template>
</q-tree>
</div>
</q-card-section>
<q-separator :vertical="$q.screen.gt.xs" />
<!-- รายชื่อ -->
<q-card-section
v-if="posmasterId"
class="col-lg-9 col-md-8 col-xs-12"
style="height: 80vh"
>
<LoadView v-if="isLaod" />
<div class="column q-col-gutter-sm" style="height: 80vh" v-else>
<div class="col">
<q-card bordered style="height: 100%; border: 1px solid #d6dee1">
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
รายชื่อ
</div>
<div class="col-12"><q-separator /></div>
<q-scroll-area style="height: 85%">
<div class="row q-pa-md">
<div class="col-12">
<q-toolbar style="padding: 0">
<q-space />
<div class="row q-gutter-md">
<div>
<q-checkbox
@update:model-value="updateIsAllRoot"
keep-color
v-model="isAllRoot"
label="แสดงทั้งหมดภายใต้หน่วยงาน"
color="primary"
>
<q-tooltip>แสดงทั้งหมดภายใต้หน่วยงาน</q-tooltip>
</q-checkbox>
</div>
<div>
<q-checkbox
@update:model-value="updateIsAll"
keep-color
v-model="isAll"
label="แสดงตำแหน่งทั้งหมด"
color="primary"
>
<q-tooltip>แสดงตำแหน่งทั้งหมด</q-tooltip>
</q-checkbox>
</div>
<div>
<q-input
outlined
dense
v-model="keyword"
label="ค้นหา"
@keydown.enter.prevent="onSearchRowPosition"
>
<template v-slot:append>
<q-icon name="search" color="grey-5" />
</template>
</q-input>
</div>
</div>
</q-toolbar>
</div>
<div class="col-12">
<p-table
ref="table"
:columns="columns"
:rows="rowPosition"
row-key="id"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[10, 25, 50, 100]"
class="custom-header-table"
@request="onRequest"
v-model:pagination="pagination"
>
<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="
checkPermission($route)?.attrIsUpdate &&
'cursor-pointer'
"
>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="
checkPermission($route)?.attrIsUpdate &&
selectPosition(props.row)
"
>
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'posNo'">
{{ props.row.posNo ? props.row.posNo : "-" }}
<q-icon
v-if="props.row.posNo && props.row.isDirector"
name="mdi-star"
color="primary"
><q-tooltip>ผู้อำนวยการ/หัวหน้า</q-tooltip>
</q-icon>
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</p-table>
</div>
</div>
</q-scroll-area>
</q-card>
</div>
<div class="col">
<q-card bordered style="height: 100%; border: 1px solid #d6dee1">
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
รายชื่อรักษาการ
</div>
<div class="col-12"><q-separator /></div>
<q-scroll-area style="height: 85%">
<div class="row q-pa-md">
<div class="col-12">
<q-toolbar style="padding: 0">
<q-space />
<div class="row q-gutter-md">
<div>
<q-input
outlined
dense
v-model="keywordAct"
label="ค้นหา"
@keydown.enter.prevent="onSearchListPerson"
>
<template v-slot:append>
<q-icon name="search" color="grey-5" />
</template>
</q-input>
</div>
</div>
</q-toolbar>
</div>
<div class="col-12">
<d-table
ref="table"
:columns="columns"
:rows="rowListPerson"
:paging="true"
row-key="id"
flat
bordered
dense
:rows-per-page-options="[10, 25, 50, 100]"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
auto-width
v-if="
rowListPerson.length !== 1 &&
checkPermission($route)?.attrIsUpdate
"
/>
<q-th
auto-width
v-if="
rowListPerson.length !== 1 &&
checkPermission($route)?.attrIsUpdate
"
/>
<q-th auto-width />
<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="
props.row.statusReport === 'DONE'
? 'text-green'
: ''
"
>
<q-td
auto-width
v-if="
rowListPerson.length !== 1 &&
checkPermission($route)?.attrIsUpdate
"
>
<q-btn
dense
flat
round
:color="
props.rowIndex + 1 == 1 ? 'grey' : 'green'
"
:disable="props.rowIndex + 1 == 1"
icon="mdi-arrow-up-bold"
@click="onSwapPerson('up', props.row.id)"
>
</q-btn>
</q-td>
<q-td
auto-width
v-if="
rowListPerson.length !== 1 &&
checkPermission($route)?.attrIsUpdate
"
>
<q-btn
dense
flat
round
:color="
rowListPerson.length == props.rowIndex + 1
? 'grey'
: 'red'
"
:disable="
rowListPerson.length == props.rowIndex + 1
"
icon="mdi-arrow-down-bold"
@click="onSwapPerson('down', props.row.id)"
>
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsDelete"
dense
flat
round
color="red"
icon="delete"
@click="onDelete(props.row.id)"
>
</q-btn>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-scroll-area>
</q-card>
</div>
</div>
</q-card-section>
</q-card-section>
</q-card>
<!-- dialog งไปออกคำส -->
<DialogCreateCommandORG
v-model:modal="modalCommand"
command-type-code="C-PM-40"
:org-publish-date="storeActing.orgPublishDate as Date||undefined"
v-model:is-officer="storeActing.isOfficer as boolean"
v-model:is-staff="storeActing.isStaff as boolean"
v-model:root-id="storeActing.rootId"
:system-name="'ACTING'"
/>
</template>
<style lang="scss" scoped>
.tree-container {
overflow: auto;
height: 74vh;
border: 1px solid #e6e6e7;
border-radius: 10px;
}
.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);
}
</style>