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

UI มอบหมายหน้าที่ความรับผิดชอบ

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-10-03 17:33:24 +07:00
parent 2d91497671
commit 67161d79ff
5 changed files with 887 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

153
src/modules/02_users/components/05_responsIbilities/DialogResponsibilities.vue Normal file
View file

@ -0,0 +1,153 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue";
/** importType*/
import type { QTableProps } from "quasar";
import type { FilterReqMaster } from "@/modules/02_users/interface/request/Main";
import type { Roles } from "@/modules/02_users/interface/response/Main";
/** use*/
const $q = useQuasar();
const {
showLoader,
hideLoader,
dialogConfirm,
messageError,
success,
dialogMessageNotify,
} = useCounterMixin();
/** props*/
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
fetchDataTable: {
type: Function,
required: true,
},
dataPosMaster: {
type: Object,
required: true,
},
});
const sysType = ref<any[]>(["SALARY_EMP"]);
const isChangData = ref<boolean>(false);
const sysTypeOptions = ref<any[]>([
{
code: "SALARY",
name: "ระบบเงินเดือน",
modules: [
{
code: "SALARY_EMP",
name: "เงินเดือนข้าราชการ",
},
{
code: "SALARY_TEMP",
name: "เงินเดือนลูกจ้างประจำ",
},
],
},
{
code: "PLACEMENT",
name: "ระบบบรรจุ",
modules: [
{
code: "PLACEMENT_NEW",
name: "เงินเดือนข้าราชการ",
},
{
code: "TRANSFER",
name: "ขอโอน",
},
],
},
]);
function closeDialog() {
modal.value = false;
sysType.value = [];
}
function onSubmit() {
if (sysType.value.length !== 0) {
dialogConfirm($q, () => {});
}
}
watch(
() => modal.value,
() => {
modal.value;
}
);
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 30%">
<q-form greedy @submit.prevent="onSubmit">
<DialogHeader tittle="กำหนดหน้าที่ความรับผิดชอบ" :close="closeDialog" />
<q-separator />
<q-card-section>
<div
v-for="(item, index) in sysTypeOptions"
:key="index"
class="col-12"
>
<div class="row q-ml-md q-col-gutter-sm">
<div class="text-weight-medium text-body2">
{{ item.name }}
</div>
<div class="col-12">
<q-list class="q-mt-none">
<q-item
dense
v-for="(op, index) in item.modules"
:key="index"
>
<q-item-section avatar :top="item.caption">
<q-checkbox
keep-color
color="primary"
dense
v-model="sysType"
:val="op.code"
@update:model-value="isChangData = true"
/>
</q-item-section>
<q-item-section>
<q-item-label>{{ op.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
:disable="sysType.length === 0 || !isChangData"
label="บันทึก"
color="secondary"
type="submit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped></style>

1
src/modules/02_users/interface/request/Main.ts
View file

@ -22,6 +22,7 @@ interface FilterReqMaster {
id: string;
type: number;
isAll: boolean;
isBlank: boolean;
page: number;
pageSize: number;
keyword: string;

16
src/modules/02_users/router.ts
View file

@ -4,7 +4,8 @@ const PageManagementRole = () =>
import("@/modules/02_users/views/page01_ManagementRoleUser.vue");
/** role*/
const ListsPageRole = () => import("@/modules/02_users/views/02_rolesAndPermissions.vue");
const ListsPageRole = () =>
import("@/modules/02_users/views/02_rolesAndPermissions.vue");
const ListsPage2Role = () =>
import("@/modules/02_users/views/page02_rolesAndPermissionsDetail.vue");
@ -16,6 +17,10 @@ const PermissionPage = () =>
const roleOrgview = () =>
import("@/modules/02_users/views/04_roleOrganization.vue");
/** responsIbilities*/
const responsIbilitiesView = () =>
import("@/modules/02_users/views/05_responsIbilities.vue");
export default [
{
path: "/users",
@ -68,4 +73,13 @@ export default [
Role: ["SUPER_ADMIN", "ADMIN"],
},
},
{
path: "/responsibilities",
name: "responsibilities",
component: responsIbilitiesView,
meta: {
Role: ["SUPER_ADMIN", "ADMIN"],
},
},
];

17
src/modules/02_users/views/03_permissionsView.vue
View file

@ -194,6 +194,7 @@ const reqMaster = reactive<FilterReqMaster>({
id: "",
type: 0,
isAll: false,
isBlank: false,
page: 1,
pageSize: 10,
keyword: "",
@ -379,10 +380,11 @@ watch([() => reqMaster.pageSize], () => {
/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนจำนวนต่อแแแถว*/
watch(
() => reqMaster.isAll,
() => [reqMaster.isAll, reqMaster.isBlank],
() => {
reqMaster.page = 1;
fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
reqMaster.id &&
fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
}
);
@ -502,6 +504,17 @@ onMounted(() => {
<q-toolbar style="padding: 0">
<q-space />
<div class="row q-gutter-md">
<div>
<q-checkbox
keep-color
v-model="reqMaster.isBlank"
label="แสดงเฉพาะตำแหน่งว่าง"
color="primary"
>
<q-tooltip>แสดงเฉพาะตำแหน่งว่าง</q-tooltip>
</q-checkbox>
</div>
<div>
<q-checkbox
keep-color

703
src/modules/02_users/views/05_responsIbilities.vue Normal file
View file

@ -0,0 +1,703 @@
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/** importType*/
import type { QTableProps } from "quasar";
import type { Pagination } from "@/modules/02_users/interface/index/Main";
import type { FilterReqMaster } from "@/modules/02_users/interface/request/Main";
import type {
NodeTree,
PosMaster,
Position,
} from "@/modules/02_users/interface/response/Main";
/** importComponents*/
import DialogResponsibilities from "@/modules/02_users/components/05_responsIbilities/DialogResponsibilities.vue";
/** use*/
const $q = useQuasar();
const { showLoader, hideLoader, messageError, success, dialogRemove } =
useCounterMixin();
/** Tree*/
const filter = ref<string>(""); // ค้นหาข้อมูลโครงาสร้าง
const nodes = ref<Array<NodeTree[]>>([]); // ข้อมูลโครงสร้าง
const lazy = ref(nodes);
const expanded = ref<string[]>([]); // แสดงข้อมูลในโหนดที่เลือก
const nodeId = ref<string>(""); // id โหนด
/** Table*/
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: (row) =>
(reqMaster.page - 1) * reqMaster.pageSize +
posMaster.value.indexOf(row) +
1,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posMasterNo",
align: "left",
label: "เลขที่ตำแหน่ง",
sortable: false,
field: (row) =>
row.orgShortname +
(row.posMasterNoPrefix ? row.posMasterNoPrefix : "") +
(row.posMasterNo ? row.posMasterNo : "") +
(row.posMasterNoSuffix ? row.posMasterNoSuffix : "") +
(row.isSit ? "(ทับที่)" : ""),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionName",
align: "left",
label: "ตำแหน่งในสายงาน",
field: (row) => (row.isSit ? row.profilePosition : row.positionName),
sortable: false,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posTypeName",
align: "left",
label: "ประเภทตำแหน่ง",
sortable: false,
field: (row) => (row.isSit ? row.profilePostype : row.posTypeName),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posLevelName",
align: "left",
label: "ระดับตำแหน่ง",
sortable: false,
field: (row) => (row.isSit ? row.profilePoslevel : row.posLevelName),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionIsSelected",
align: "left",
label: "คนครอง",
sortable: false,
field: (row) =>
row.fullNameCurrentHolder !== null ? row.fullNameCurrentHolder : "ว่าง",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "responsibilities",
align: "left",
label: "การเจ้าหน้าที่",
sortable: false,
field: "responsibilities",
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",
},
]);
// ฟอร์มค้นหาตำแหน่ง
const reqMaster = reactive<FilterReqMaster>({
id: "",
type: 0,
isAll: false,
isBlank: false,
page: 1,
pageSize: 10,
keyword: "",
revisionId: "",
});
const maxPage = ref<number>(0);
const totalRow = ref<number>(0);
const posMaster = ref<PosMaster[]>([]); // ข้อมูลรายการตำแหน่ง
const dataPosMaster = ref<PosMaster>(); // ข้อมูลตำแหน่ง
const pagination = ref<Pagination>({
page: reqMaster.page,
rowsPerPage: reqMaster.pageSize,
});
const modalDialog = ref<boolean>(false);
/**
* function เรียกข้อมูลโครงสร้าง แบบปัจุบัน
*/
async function fetchOrganizationActive() {
showLoader();
await http
.get(config.API.activeOrganization)
.then(async (res) => {
const data = res.data.result;
if (data) {
await fetchDataTree(data.activeId);
}
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* function fetch ข้อมูลของ Tree
* @param id id โครงสร้าง
*/
async function fetchDataTree(id: string) {
showLoader();
await http
.get(config.API.orgByid(id.toString()))
.then(async (res) => {
const data = await res.data.result;
nodes.value = data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* function fetch ข้อรายการตำแหน่ง
* @param id idTree
* @param level levelTree
*/
async function fetchDataTable(id: string, revisionId: string, level: number) {
showLoader();
posMaster.value = [];
reqMaster.id = id;
reqMaster.revisionId = revisionId;
reqMaster.type = level;
await http
.post(config.API.orgPosMasterList, reqMaster)
.then(async (res) => {
const dataMain: PosMaster[] = [];
maxPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
totalRow.value = res.data.result.total;
await res.data.result.data.forEach((e: PosMaster) => {
const p = e.positions;
if (p.length !== 0) {
const a = p.find((el: Position) => el.positionIsSelected === true);
const { id, ...rest } = a ? a : p[0];
const pos = { ...e, ...rest };
dataMain.push(pos);
}
});
posMaster.value = dataMain;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* function เลือกข้อมูลโครางสร่้าง
* @param data
*/
function updateSelected(data: NodeTree) {
nodeId.value = data.orgTreeId;
fetchDataTable(data.orgTreeId, data.orgRevisionId, data.orgLevel);
}
/**
* function updatePagination
* @param newPagination ข้อมูล Pagination ใหม่
*/
function updatePagination(newPagination: Pagination) {
reqMaster.pageSize = newPagination.rowsPerPage;
reqMaster.page = 1;
}
function onClickAddRole(data: PosMaster) {
modalDialog.value = true;
dataPosMaster.value = data;
}
/**
* ยืนยันการลบกำหนดหน้าที่ความรับผิดชอบ
* @param id ตำแหน่ง
*/
function onDelete(id: string) {
dialogRemove($q, () => {
// showLoader();
// http
// .post(config.API.managementPermission, {
// authRoleId: "",
// posMasterId: id,
// })
// .then(async () => {
// await fetchDataTable(
// reqMaster.id,
// reqMaster.revisionId,
// reqMaster.type
// );
// success($q, "ลบข้อมูลสำเร็จ");
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// hideLoader();
// });
});
}
/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
watch([() => reqMaster.pageSize], () => {
fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
});
/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนจำนวนต่อแแแถว*/
watch(
() => [reqMaster.isAll, reqMaster.isBlank],
() => {
reqMaster.page = 1;
reqMaster.id &&
fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
}
);
onMounted(() => {
fetchOrganizationActive();
});
</script>
<template>
<div class="row items-center">
<div class="toptitle text-dark row items-center q-py-xs">
มอบหมายหน้าที่ความรับผิดชอบ
</div>
</div>
<q-card flast bordered>
<q-card-section style="padding: 0px">
<div class="col-12">
<q-card bordered class="col-12 row caedNone">
<!-- Tree -->
<div class="col-xs-12 col-sm-3 row">
<div class="col-12 row no-wrap bg-grey-1">
<div class="col-12 q-py-sm q-px-sm">
<div class="q-gutter-sm">
<div class="row q-col-gutter-sm q-pl-sm">
<div class="col-12">
<q-input dense outlined v-model="filter" label="ค้นหา">
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon name="search" color="grey-5" />
</template>
</q-input>
</div>
</div>
<div class="bg-white tree-container q-pa-xs">
<q-tree
class="q-pa-sm q-gutter-sm"
dense
default-expand-all
:nodes="lazy"
node-key="orgTreeId"
label-key="labelName"
:filter="filter"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
v-model:expanded="expanded"
>
<template v-slot:default-header="prop">
<q-item
@click.stop="updateSelected(prop.node)"
:active="nodeId == prop.node.orgTreeId"
clickable
active-class="my-list-link text-primary text-weight-medium"
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 }}
</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>
</q-tree>
</div>
</div>
</div>
</div>
<div class="col-12 row">
<q-separator :vertical="!$q.screen.lt.md" />
</div>
</div>
<!-- TOOLBAR -->
<div class="col-xs-12 col-sm-9 q-pa-md row">
<div class="col-12">
<q-toolbar style="padding: 0">
<q-space />
<div class="row q-gutter-md">
<div>
<q-checkbox
keep-color
v-model="reqMaster.isBlank"
label="แสดงเฉพาะตำแหน่งว่าง"
color="primary"
>
<q-tooltip>แสดงเฉพาะตำแหน่งว่าง</q-tooltip>
</q-checkbox>
</div>
<div>
<q-checkbox
keep-color
v-model="reqMaster.isAll"
label="แสดงตำแหน่งทั้งหมด"
color="primary"
>
<q-tooltip
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
>
</q-checkbox>
</div>
<div>
<q-input
outlined
dense
v-model="reqMaster.keyword"
label="ค้นหา"
@keydown.enter.prevent="
(reqMaster.page = 1),
fetchDataTable(
reqMaster.id,
reqMaster.revisionId,
reqMaster.type
)
"
>
<template v-slot:append>
<q-icon name="search" color="grey-5" />
</template>
</q-input>
</div>
</div>
</q-toolbar>
<d-table
ref="table"
:columns="columns"
:rows="posMaster"
:paging="true"
row-key="id"
flat
bordered
dense
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width></q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-btn
flat
size="14px"
color="primary"
round
dense
@click="props.expand = !props.expand"
:icon="
props.expand ? 'mdi-menu-down' : 'mdi-menu-right'
"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td>
<q-btn
flat
dense
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
size="12px"
>
<q-menu>
<q-list dense style="min-width: 250px">
<q-item
clickable
v-close-popup
@click="onClickAddRole(props.row)"
>
<q-item-section avatar>
<q-icon
color="blue-9"
name="mdi-account-group"
/>
</q-item-section>
<q-item-section>
กำหนดหน้าที่ความรับผิดชอบ</q-item-section
>
</q-item>
<q-item
clickable
v-close-popup
@click="onDelete(props.row.id)"
>
<q-item-section avatar>
<q-icon color="red" name="delete" />
</q-item-section>
<q-item-section> ลบ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
<q-tr v-show="props.expand" :props="props">
<q-td colspan="100%" class="bg-grey-1">
<q-card flat bordered class="text-left q-ma-sm">
<d-table
flat
:columns="columnsExpand"
:rows="props.row.positions"
table-class="text-grey-9"
row-key="id"
dense
hide-bottom
bordered
separator="vertical"
class="custom-header-table-expand"
>
<template v-slot:header="props">
<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>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'" class="text-body2">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name === 'posExecutiveName'"
class="text-body2"
>
{{ col.value ? col.value : "-" }}
</div>
<div
v-else-if="
col.name === 'positionExecutiveField'
"
class="text-body2"
>
{{ col.value ? col.value : "-" }}
</div>
<div
v-else-if="col.name === 'positionArea'"
class="text-body2"
>
{{ col.value ? col.value : "-" }}
</div>
<div v-else class="text-body2">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</q-card>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ totalRow }} รายการ
<q-pagination
v-model="reqMaster.page"
active-color="primary"
color="dark"
:max="maxPage"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="
fetchDataTable(
reqMaster.id,
reqMaster.revisionId,
reqMaster.type
)
"
></q-pagination>
</template>
</d-table>
</div>
</div>
</q-card>
</div>
</q-card-section>
</q-card>
<DialogResponsibilities
v-model:modal="modalDialog"
:dataPosMaster="dataPosMaster as PosMaster"
:fetchDataTable="fetchDataTable"
/>
</template>
<style scoped>
.tree-container {
overflow: auto;
height: 75vh;
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>