478 lines
15 KiB
Vue
478 lines
15 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, watch } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import {
|
|
checkPermission,
|
|
checkPermissionList,
|
|
checkPermissionCreate,
|
|
} from "@/utils/permissions";
|
|
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
/** importType*/
|
|
import type { DataOrgRevision } from "@/modules/02_organization/interface/index/Main";
|
|
import type { OrgRevision } from "@/modules/02_organization/interface/response/organizational";
|
|
|
|
/** importComponents*/
|
|
import TreeView from "@/modules/02_organization/components/MainView.vue";
|
|
import StructureView from "@/modules/02_organization/components/StructureMain.vue";
|
|
import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
|
|
import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
|
|
import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
|
|
import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue"; //ส่่งไปออกคำสั่ง
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
/** use*/
|
|
const $q = useQuasar();
|
|
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
|
const store = useOrganizational();
|
|
|
|
/** ตัวแปร*/
|
|
const modalNewStructure = ref<boolean>(false); // เพิ่มโครงสร้าง
|
|
const modalDateTime = ref<boolean>(false); // ตั้งเวลาเผยแพร่
|
|
const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
|
|
const typeStructure = ref<string>(""); // ประเภทการเพิ่มโครงสร้าง
|
|
/** ประวัติโครงสร้าง*/
|
|
const itemHistory = ref<DataOrgRevision[]>([]); // List ประวัติโครงสร้าง
|
|
const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
|
|
const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
|
|
const count = ref<number>(0);
|
|
|
|
const modalCommand = ref<boolean>(false); //ส่งไปออกคำสั่ง
|
|
const modalRemark = ref<boolean>(false); // หมายเหตุ
|
|
const isDeputy = ref<boolean>(false); // สำนักงานปลัด
|
|
|
|
/**
|
|
* function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
|
|
* เก็บข่อมูลใน store
|
|
*/
|
|
async function fetchOrganizationActive() {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.activeOrganization)
|
|
.then(async (res) => {
|
|
const data = await res.data.result;
|
|
if (data) {
|
|
await store.fetchDataActive(data);
|
|
// ต้องมี id ของแบบร่างถึงจะเช็ค isLock
|
|
if (data.draftId) {
|
|
await fetchCheckIslock(data.draftId);
|
|
} else {
|
|
store.isLosck = false;
|
|
}
|
|
|
|
if (data.activeName === null && data.draftName === null) {
|
|
isStatusData.value = false;
|
|
} else {
|
|
isStatusData.value = true;
|
|
if (isStatusData.value) {
|
|
if (data.activeName === null) {
|
|
store.typeOrganizational = "draft";
|
|
} else if (data.draftName === null) {
|
|
store.typeOrganizational = "current";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** function เรียกข้อมูรายการลประวัติโครงสร้าง*/
|
|
async function fetchHistory() {
|
|
await http
|
|
.get(config.API.organizationHistoryNew)
|
|
.then(async (res) => {
|
|
const data = await res.data.result;
|
|
const filterData = data.filter(
|
|
(e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
|
|
);
|
|
|
|
itemHistory.value = filterData.map((e: OrgRevision) => ({
|
|
id: e.orgRevisionId,
|
|
name: e.orgRevisionName,
|
|
orgRevisionCreatedAt: e.orgRevisionCreatedAt
|
|
? date2Thai(e.orgRevisionCreatedAt)
|
|
: "",
|
|
}));
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* function openPopup เพิ่มโครงสร้าง
|
|
* @param type ประเภทการเพิ่มโครงาสร้าง
|
|
*/
|
|
function ocClickAddStructure(type: string) {
|
|
modalNewStructure.value = !modalNewStructure.value;
|
|
typeStructure.value = type;
|
|
}
|
|
|
|
/** function openPopup ตั้งเวลาเผยแพร่ */
|
|
function onClickDateTime() {
|
|
modalDateTime.value = !modalDateTime.value;
|
|
}
|
|
|
|
/**
|
|
* function เปิดประวัติโครงสร้าง
|
|
* @param id id โครงสร้าง
|
|
* @param name ชื่อโครงสร้าง
|
|
*/
|
|
function onClickHistory(id: string, name: string) {
|
|
historyId.value = id;
|
|
store.historyId = id;
|
|
labelHistory.value = name;
|
|
count.value++;
|
|
}
|
|
|
|
async function workflowSystem() {
|
|
http
|
|
.get(config.API.workflowKeycloakSystem("SYS_ORG"))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
store.isOfficer = data.isOfficer;
|
|
store.isStaff = data.isStaff;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
}
|
|
|
|
async function fetchCheckIslock(id: string) {
|
|
http
|
|
.get(config.API.orgIsLock + `/${id}`)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
store.isLosck = data;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
}
|
|
|
|
watch(
|
|
() => store.typeOrganizational,
|
|
() => {
|
|
if (
|
|
store.typeOrganizational === "draft" &&
|
|
store.isOfficer === null &&
|
|
store.isStaff === null
|
|
) {
|
|
workflowSystem();
|
|
} else if (store.typeOrganizational === "draft") {
|
|
store.rootId = "";
|
|
}
|
|
}
|
|
);
|
|
|
|
/**
|
|
* lifecycleHook ทำงานเมื่อมีการเรียกใช้ Components
|
|
* ดึงข้อมูลโครงสร้างและรายการประวัติโครงสร้าง
|
|
*/
|
|
onMounted(async () => {
|
|
store.typeOrganizational = "current";
|
|
await Promise.all([fetchOrganizationActive(), fetchHistory()]);
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="row items-center">
|
|
<div class="toptitle text-dark row items-center q-py-xs">
|
|
โครงสร้างอัตรากำลัง
|
|
</div>
|
|
<q-space />
|
|
|
|
<div
|
|
class="toptitle row items-center"
|
|
v-if="store.typeOrganizational === 'draft'"
|
|
>
|
|
<div
|
|
v-if="store.isPublic && store.orgPublishDate"
|
|
class="q-pr-md text-caption"
|
|
>
|
|
วันที่เผยแพร่ :
|
|
<strong>{{ date2Thai(store.orgPublishDate) }}</strong>
|
|
</div>
|
|
<q-btn
|
|
v-if="checkPermission($route)?.attrOwnership == 'OWNER'"
|
|
dense
|
|
class="q-px-md"
|
|
color="indigo-9"
|
|
icon="alarm"
|
|
label="ตั้งเวลาเผยแพร่"
|
|
@click="onClickDateTime"
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<q-card flat bordered>
|
|
<div class="q-pa-xl" v-if="!isStatusData">
|
|
<q-card
|
|
flat
|
|
bordered
|
|
style="
|
|
height: 70vh;
|
|
border: 1px solid rgb(210, 210, 210);
|
|
border-radius: 5px;
|
|
"
|
|
>
|
|
<div
|
|
class="text-center row"
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
"
|
|
>
|
|
<div>
|
|
<q-btn
|
|
v-if="checkPermission($route)?.attrIsCreate"
|
|
flat
|
|
style="background-color: #d8f5f2"
|
|
round
|
|
color="primary"
|
|
size="lg"
|
|
icon="add"
|
|
@click="ocClickAddStructure('NEW')"
|
|
>
|
|
<q-tooltip>เพิ่มโครงสร้าง </q-tooltip>
|
|
</q-btn>
|
|
<div class="q-mt-sm">เพิ่มโครงสร้าง</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<q-card class="my-card">
|
|
<q-card-section class="q-pa-sm">
|
|
<q-toolbar class="q-gutter-md items-center" style="padding: 0px">
|
|
<q-btn-group outline>
|
|
<q-btn
|
|
dense
|
|
class="q-px-md"
|
|
:outline="store.typeOrganizational === 'current' ? false : true"
|
|
color="blue"
|
|
label="ปัจจุบัน"
|
|
:disable="store.activeId == '' || store.activeId == null"
|
|
@click="
|
|
(store.typeOrganizational = 'current'),
|
|
(labelHistory = 'ประวัติโครงสร้าง')
|
|
"
|
|
/>
|
|
|
|
<q-btn
|
|
v-if="checkPermission($route)?.attrIsUpdate"
|
|
dense
|
|
class="q-px-md"
|
|
:outline="store.typeOrganizational === 'draft' ? false : true"
|
|
color="blue"
|
|
label="แบบร่าง"
|
|
:disable="store.draftId == '' || store.draftId == null"
|
|
@click="
|
|
(store.typeOrganizational = 'draft'),
|
|
(labelHistory = 'ประวัติโครงสร้าง')
|
|
"
|
|
/>
|
|
<q-btn-dropdown
|
|
v-if="
|
|
checkPermission($route)?.attrOwnership == 'OWNER' &&
|
|
itemHistory.length > 0
|
|
"
|
|
dense
|
|
class="q-px-md"
|
|
color="blue"
|
|
:label="labelHistory"
|
|
@click="store.typeOrganizational = 'old'"
|
|
:outline="store.typeOrganizational === 'old' ? false : true"
|
|
>
|
|
<q-list>
|
|
<q-item
|
|
dense
|
|
clickable
|
|
v-close-popup
|
|
v-for="(item, index) in itemHistory"
|
|
:key="index"
|
|
@click="onClickHistory(item.id, item.name)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label
|
|
>{{ item.orgRevisionCreatedAt }}
|
|
{{ item.name }}</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</q-btn-group>
|
|
|
|
<q-btn
|
|
v-if="store.remark"
|
|
flat
|
|
round
|
|
color="info"
|
|
icon="info"
|
|
@click="modalRemark = true"
|
|
>
|
|
<q-tooltip>หมายเหตุ</q-tooltip>
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
v-if="
|
|
checkPermission($route)?.attrOwnership == 'OWNER' &&
|
|
!store.isLosck
|
|
"
|
|
color="green-6"
|
|
dense
|
|
unelevated
|
|
label="เพิ่มโครงสร้าง"
|
|
@click="ocClickAddStructure('ADD')"
|
|
class="q-px-md"
|
|
/>
|
|
|
|
<q-btn
|
|
v-if="
|
|
store.typeOrganizational === 'draft' &&
|
|
(store.isOfficer === true || store.isStaff === true) &&
|
|
checkPermissionList(['COMMAND']) &&
|
|
checkPermissionCreate('COMMAND')
|
|
"
|
|
flat
|
|
round
|
|
dense
|
|
:disable="store.isStaff == true && store.rootId == ''"
|
|
color="primary"
|
|
icon="mdi-account-arrow-right"
|
|
@click.prevent="modalCommand = true"
|
|
>
|
|
<q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
|
|
</q-btn>
|
|
|
|
<!-- <q-btn-dropdown
|
|
v-if="checkPermission($route)?.attrOwnership == 'OWNER'"
|
|
dense
|
|
unelevated
|
|
class="q-px-md"
|
|
color="green-6"
|
|
label="เพิ่มโครงสร้าง"
|
|
>
|
|
<q-list>
|
|
<q-item
|
|
dense
|
|
clickable
|
|
v-close-popup
|
|
v-for="(item, index) in itemStructure"
|
|
:key="index"
|
|
@click="ocClickAddStructure(item.id)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>{{ item.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown> -->
|
|
|
|
<q-space />
|
|
<q-btn
|
|
flat
|
|
dense
|
|
:color="store.statusView === 'list' ? 'grey-7' : 'grey-4'"
|
|
icon="mdi-file-tree"
|
|
@click="store.statusView = 'list'"
|
|
/>
|
|
<q-separator inset vertical />
|
|
<q-btn
|
|
flat
|
|
dense
|
|
icon="mdi-sitemap"
|
|
:color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
|
|
@click="store.statusView = 'tree'"
|
|
/>
|
|
<q-separator inset vertical />
|
|
<q-btn
|
|
flat
|
|
dense
|
|
icon="mdi-account-group"
|
|
:color="store.statusView === 'org' ? 'grey-7' : 'grey-4'"
|
|
@click="store.statusView = 'org'"
|
|
/>
|
|
</q-toolbar>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-section style="padding: 0px">
|
|
<q-tab-panels v-model="store.statusView" animated>
|
|
<q-tab-panel name="list" style="padding: 0px">
|
|
<TreeView
|
|
v-if="store.statusView === 'list'"
|
|
v-model:historyId="historyId"
|
|
v-model:count="count"
|
|
v-model:is-deputy="isDeputy"
|
|
/>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="tree" style="padding: 0px">
|
|
<StructureView v-if="store.statusView === 'tree'" />
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="org" style="padding: 0px">
|
|
<StructureOrgMain v-if="store.statusView === 'org'" />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</q-card>
|
|
|
|
<!-- เพิ่มโครงสร้าง -->
|
|
<DialogFormNewStructure
|
|
v-model:new-structure="modalNewStructure"
|
|
v-model:status="isStatusData"
|
|
v-model:type="typeStructure"
|
|
:fetchActive="fetchOrganizationActive"
|
|
/>
|
|
|
|
<!-- ตั้งเวลาเผยแพร่ -->
|
|
<DialogDateTime
|
|
:modal="modalDateTime"
|
|
:close="onClickDateTime"
|
|
:fetch-active="fetchOrganizationActive"
|
|
/>
|
|
|
|
<!-- dialog ส่งไปออกคำสั่ง -->
|
|
<DialogCreateCommandORG
|
|
v-model:modal="modalCommand"
|
|
command-type-code="C-PM-38"
|
|
:org-publish-date="store.orgPublishDate as Date||undefined"
|
|
v-model:is-officer="store.isOfficer as boolean"
|
|
v-model:is-staff="store.isStaff as boolean"
|
|
v-model:root-id="store.rootId"
|
|
:system-name="'ORGANIZATION'"
|
|
v-model:is-deputy="isDeputy"
|
|
/>
|
|
|
|
<q-dialog v-model="modalRemark">
|
|
<q-card style="width: 300px">
|
|
<DialogHeader tittle="หมายเหตุ" :close="() => (modalRemark = false)" />
|
|
|
|
<q-separator />
|
|
<q-card-section>
|
|
<div class="row">
|
|
<div class="col">
|
|
{{ store.remark }}
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|