Merge branch 'develop' into devTee

This commit is contained in:
setthawutttty 2024-02-12 16:44:49 +07:00
commit f685da61a0
7 changed files with 523 additions and 16 deletions

View file

@ -29,6 +29,7 @@ export default {
orgPosMove: `${orgPos}/move`,
organizationShortName: `${organization}/sort`,
organizationPublishGet: `${organization}/get/publish`,
orgPosDNA: `${orgPos}/dna`, //สืบทอดตำแหน่ง
orgPosExecutiveById: (id: string) => `${orgPos}/executive/${id}`,
orgPosHistory: (id: string) => `${orgPos}/history/${id}`,

View file

@ -736,17 +736,6 @@ async function emitSearch(keyword: string, typeSelect: string) {
}}</q-tooltip></q-btn
>
<q-space />
<!-- succession -->
<q-btn
dense
outline
keep-color
label="สืบทอดตำแหน่ง"
color="primary"
>
<q-tooltip>เลอกสบทอดตำแหน</q-tooltip>
</q-btn>
</q-card-actions>
</q-card>
</div>

View file

@ -0,0 +1,410 @@
<script setup lang="ts">
import { ref, watch, reactive } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
/** importType*/
import type { QTableProps } from "quasar";
import type { NewPagination } from "@/modules/02_organizationalNew/interface/index/Main";
import type { DataTree } from "@/modules/02_organizationalNew/interface/index/organizational";
import type {
OrgTree,
PosMaster,
} from "@/modules/02_organizationalNew/interface/response/organizational";
import type {
FilterMaster,
Inherit,
} from "@/modules/02_organizationalNew/interface/request/organizational";
/** importComponents*/
import Header from "@/components/DialogHeader.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
/** use*/
const $q = useQuasar();
const store = useOrganizational();
const {
showLoader,
hideLoader,
dialogConfirm,
messageError,
dialogMessageNotify,
success,
} = useCounterMixin();
/** props*/
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
rowId: { type: String, default: "" },
});
/*************************** Tree ***********************************/
const filterTree = ref<string>("");
const nodeTree = ref<OrgTree[]>([]);
const selectedTree = ref<string>("");
const filterRef = ref();
const levelTree = ref<number>(0);
/** function เรียกข้อมูล Tree แบบ ปัจจุบัน*/
async function fetchTree() {
showLoader();
const id: string = store.activeId ? store.activeId?.toString() : "";
await http
.get(config.API.orgByid(id))
.then((res) => {
console.log(res);
nodeTree.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/** resetFilterTree*/
function resetFilter() {
filterTree.value = "";
filterRef.value.focus();
}
/** function เลือกหน่วยงาน*/
async function updateSelected(data: DataTree) {
levelTree.value = data.orgLevel;
selectedTree.value = data.orgTreeId;
reqMaster.id = await data.orgTreeId;
reqMaster.type = await data.orgLevel;
await fetchTable();
}
/*************************** TABLE ***********************************/
/** columns*/
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posMasterNo",
align: "left",
label: "เลขที่ตำแหน่ง",
sortable: true,
field: "posMasterNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const rows = ref<PosMaster[]>([]);
const reqMaster = reactive<FilterMaster>({
id: "",
type: 0,
isAll: false,
page: 1,
pageSize: 10,
keyword: "",
});
const totalRow = ref<number>(0);
const selectedPos = ref<PosMaster[]>([]);
/** function เรียกข้อมูล Table Position*/
async function fetchTable() {
selectedPos.value = [];
await http
.post(config.API.orgPosMasterList, reqMaster)
.then((res) => {
totalRow.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
const data = res.data.result.data;
const list = data.map((e: PosMaster) => ({
...e,
posMasterNo:
e.orgShortname +
e.posMasterNoPrefix +
e.posMasterNo +
e.posMasterNoSuffix,
}));
rows.value = list;
})
.catch((err) => {
messageError($q, err);
});
}
/**
* function updatePagination
* @param newPagination อม Pagination ใหม
*/
function updatePagination(newPagination: NewPagination) {
reqMaster.pageSize = newPagination.rowsPerPage;
reqMaster.page = 1;
}
/** funcion ค้นหาข้อมูลใน Table*/
async function filterKeyword() {
reqMaster.page = 1;
fetchTable();
}
/** function ยืนยันกาสืบทอดตำแหน่ง */
function onClickConfirm() {
if (selectedPos.value.length === 0) {
dialogMessageNotify($q, "กรุณาเลือกตำแหน่งสืบทอด");
} else {
dialogConfirm(
$q,
async () => {
console.log(props.rowId, selectedPos.value[0].id);
const body: Inherit = {
currentId: props.rowId,
nextId: selectedPos.value[0].id,
};
showLoader();
await http
.post(config.API.orgPosDNA, body)
.then(() => {
success($q, "การสืบทอดตำแหน่งสำเร็จ");
modal.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการสืบทอดตำแหน่ง",
"ต้องการยืนยันการสืบทอดตำแหน่งนี้หรือไม่ ?"
);
}
}
/** callblck function ทำการ fetch ข้อมูล tree เมื่อเปิด popup*/
watch(
() => modal.value,
async () => {
modal.value ? await fetchTree() : clearForm();
}
);
/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
watch([() => reqMaster.page, () => reqMaster.pageSize], async () => {
await fetchTable();
});
/** function clear ข้อมูล*/
function clearForm() {
nodeTree.value = [];
rows.value = [];
selectedTree.value = "";
reqMaster.id = "";
reqMaster.type = 0;
reqMaster.isAll = false;
reqMaster.page = 1;
reqMaster.pageSize = 10;
reqMaster.keyword = "";
}
</script>
<template>
<q-dialog v-model="modal" full-width persistent>
<q-card>
<Header
:tittle="'สืบทอดตำแหน่ง'"
:close="
() => {
modal = false;
}
"
/>
<q-separator />
<q-card-section class="q-pt-none q-pa-md">
<div class="row q-col-gutter-md">
<q-card
bordered
class="col-12 col-sm-4 scroll q-pa-sm"
style="max-height: 70vh"
>
<q-toolbar style="padding: 0">
<q-toolbar-title class="text-subtitle2 text-bold"
>เลอกหนวยงาน</q-toolbar-title
>
</q-toolbar>
<q-input
ref="filterRef"
dense
outlined
v-model="filterTree"
label="ค้นหา"
>
<template v-slot:append>
<q-icon
v-if="filterTree !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-tree
class="q-pa-md q-gutter-sm"
dense
default-expand-all
selected-color="primary"
:nodes="nodeTree"
node-key="orgTreeId"
label-key="orgTreeName"
:filter="filterTree"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
>
<template v-slot:default-header="prop">
<!--แสดงชอแผนก มพวหนา คลกแลวกาง/ Tree-->
<q-item
clickable
:active="selectedTree == prop.node.orgTreeId"
@click.stop="updateSelected(prop.node)"
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">
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
</div>
</q-item>
</template>
</q-tree>
</q-card>
<q-card bordered class="col-12 col-sm-8 q-pa-sm">
<q-toolbar style="padding: 0">
<q-toolbar-title class="text-subtitle2 text-bold"
>เลอกตำแหนงทองการสบทอด</q-toolbar-title
>
<q-space />
<div>
<q-input
outlined
dense
v-model="reqMaster.keyword"
label="ค้นหา"
@keyup.enter="filterKeyword"
/>
</div>
</q-toolbar>
<d-table
flat
bordered
:rows="rows"
:columns="columns"
row-key="id"
no-data-label="ไม่มีข้อมูล"
ref="table"
:paging="true"
dense
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
class="tableTb"
selection="single"
v-model:selected="selectedPos"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<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-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</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 }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="reqMaster.page"
active-color="primary"
color="dark"
:max="totalRow"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</q-card>
</div>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<style scoped>
.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>

View file

@ -9,7 +9,10 @@ import type {
OrgTree,
PosMaster2,
} from "@/modules/02_organizationalNew/interface/response/organizational";
import type { MovePos } from "@/modules/02_organizationalNew/interface/request/organizational";
import type {
MovePos,
FilterMaster,
} from "@/modules/02_organizationalNew/interface/request/organizational";
import type { DataTree } from "@/modules/02_organizationalNew/interface/index/organizational";
import HeaderDialog from "@/components/DialogHeader.vue";
@ -29,6 +32,8 @@ const {
} = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
const totalPage = defineModel<number>("totalPage", { required: true });
const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
const columns = defineModel<QTableProps[]>("columns", {});
const rows = defineModel<PosMaster2[]>("rows", { required: true });
@ -111,9 +116,60 @@ function onClickMovePos() {
}
}
/**
* function fetch อรายการตำแหน
* @param id idTree
* @param level levelTree
*/
async function fetchDataTable(id: string, level: number, action: boolean) {
// orgLevel.value = level;
// 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) => {
// 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;
// if (p.length !== 0) {
// 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;
// }, 500);
// });
}
watch(
() => modal.value,
() => {
reqMaster.value.page = 1;
if (modal.value && props.type === "SINGER") {
const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
selectedFilter.value = data;
@ -181,7 +237,11 @@ watch(
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
{{
(reqMaster.page - 1) * Number(reqMaster.pageSize) +
props.rowIndex +
1
}}
</div>
<div v-else>
@ -190,6 +250,17 @@ watch(
</q-td>
</q-tr>
</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>
</q-card>

View file

@ -159,11 +159,20 @@ watch(
);
/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
action1.value === false &&
fetchDataTable(reqMaster.id, reqMaster.type, false);
});
/** callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด*/
watch(
[() => reqMaster.page, () => reqMaster.pageSize, () => reqMaster.isAll],
() => reqMaster.isAll,
() => {
action1.value === false &&
if (reqMaster.page !== 1) {
reqMaster.page = 1;
} else {
fetchDataTable(reqMaster.id, reqMaster.type, false);
}
}
);
</script>

View file

@ -22,6 +22,8 @@ import DialogSort from "@/modules/02_organizationalNew/components/DialogSortPosi
import DialogMovePos from "@/modules/02_organizationalNew/components/DialogMovePos.vue";
import DialogHistoryPos from "@/modules/02_organizationalNew/components/DialogHistoryPos.vue";
import DialogSelectPerson from "@/modules/02_organizationalNew/components/DialogSelectPerson.vue";
import DialogInherit from "@/modules/02_organizationalNew/components/DialogInherit.vue";
/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import { useCounterMixin } from "@/stores/mixin";
@ -78,6 +80,12 @@ const listMenu = ref<ListMenu[]>([
type: "MOVE",
color: "positive",
},
{
label: "สืบทอดตำแหน่ง",
icon: "mdi-account-multiple-outline",
type: "INHERIT",
color: "deep-orange",
},
{
label: "ประวัติตำแหน่ง",
icon: "history",
@ -356,6 +364,12 @@ function removePerson(id: string) {
);
}
const modalDialogInherit = ref<boolean>(false);
function onClickInherit(id: string) {
modalDialogInherit.value = !modalDialogInherit.value;
rowId.value = id;
}
/** ดึงข้อมูลสถิติจำนวนด้านบน*/
function getSummary() {
showLoader();
@ -655,6 +669,8 @@ async function genReportDoc(data: any) {
? onClickMovePos(props.row.id, 'SINGER')
: item.type === 'HISTORY'
? onClickHistoryPos(props.row.id)
: item.type === 'INHERIT'
? onClickInherit(props.row.id)
: null
"
>
@ -790,6 +806,8 @@ async function genReportDoc(data: any) {
v-model:nodeTree="nodeTree"
v-model:columns="columns as QTableProps[]"
v-model:rows="posMaster"
v-model:totalPage="totalPage"
v-model:reqMaster="reqMaster"
:fetchDataTree="props.fetchDataTree"
:type="typeMove"
:rowId="rowId"
@ -798,12 +816,16 @@ async function genReportDoc(data: any) {
<!-- ประวตำแหน -->
<DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
<!-- เลอกคนครอง -->
<DialogSelectPerson
v-model:modal="modalSelectPerson"
:dataDetailPos="dataDetailPos"
:fetchDataTable="props.fetchDataTable"
:getSummary="getSummary"
/>
<!-- บทอดตำแหน -->
<DialogInherit v-model:modal="modalDialogInherit" :rowId="rowId" />
</template>
<style lang="scss" scoped>

View file

@ -12,4 +12,9 @@ interface MovePos {
positionMaster: string[];
}
export type { FilterMaster, MovePos };
interface Inherit {
currentId: string;
nextId: string;
}
export type { FilterMaster, MovePos, Inherit };