update
This commit is contained in:
parent
46533bbd62
commit
15d3ac574d
128 changed files with 347 additions and 322 deletions
165
src/modules/02_organization/views/ExampleSearchTree.vue
Normal file
165
src/modules/02_organization/views/ExampleSearchTree.vue
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
<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 type { ListMenu } from "@/modules/02_organization/interface/index/Main";
|
||||
import type { OrgTree } from "@/modules/02_organization/interface/response/organizational";
|
||||
|
||||
/** importStore*/
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const store = useOrganizational();
|
||||
const { dialogRemove, showLoader, hideLoader, messageError, success } =
|
||||
useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
|
||||
const filter = ref<string>("");
|
||||
const nodes = ref<Array<any>>([]);
|
||||
const lazy = ref(nodes);
|
||||
const expanded = ref<Array<any>>([]);
|
||||
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
|
||||
const noData = ref<string>("ไม่มีข้อมูล");
|
||||
const selected = ref("");
|
||||
|
||||
const idVal = ref("");
|
||||
async function fetchDataTree(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgByid(id.toString()))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
nodes.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
const breakLoop = ref<boolean>(false);
|
||||
const dataObject = ref([]);
|
||||
async function onSort(orgRootId: string) {
|
||||
if (orgRootId) {
|
||||
idVal.value = "children => " + orgRootId;
|
||||
breakLoop.value = false;
|
||||
|
||||
const targetNodeId = orgRootId;
|
||||
|
||||
for (let index = 0; index < nodes.value.length; index++) {
|
||||
const element = nodes.value[index];
|
||||
searchAndReplace(element, targetNodeId);
|
||||
if (breakLoop.value) break;
|
||||
}
|
||||
} else {
|
||||
idVal.value = "root";
|
||||
}
|
||||
}
|
||||
|
||||
function searchAndReplace(treeNode: any, organizationId: string) {
|
||||
if (treeNode.orgTreeId === organizationId) {
|
||||
dataObject.value = treeNode.children;
|
||||
breakLoop.value = true;
|
||||
} else if (treeNode.children) {
|
||||
for (const child of treeNode.children) {
|
||||
searchAndReplace(child, organizationId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const listAdd = ref<ListMenu[]>([
|
||||
{
|
||||
label: "จัดลำดับ",
|
||||
icon: "filter_list",
|
||||
type: "SORT",
|
||||
color: "green-7",
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchDataTree("a449eac0-93a5-4ccc-8fbc-2974ca8ee61b");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-12 q-py-md q-px-lg">
|
||||
<q-tree
|
||||
class="q-pa-md q-gutter-sm"
|
||||
dense
|
||||
default-expand-all
|
||||
selected-color="primary"
|
||||
:nodes="lazy"
|
||||
node-key="orgTreeId"
|
||||
label-key="orgTreeName"
|
||||
:filter="filter"
|
||||
:no-results-label="notFound"
|
||||
:no-nodes-label="noData"
|
||||
v-model:expanded="expanded"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:default-header="prop">
|
||||
<!-- {{ prop.node.orgTreeName }} -->
|
||||
|
||||
<div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
|
||||
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list
|
||||
dense
|
||||
v-for="(item, index) in prop.node.orgLevel === 4
|
||||
? listAdd.slice(1, 6)
|
||||
: listAdd"
|
||||
:key="index"
|
||||
style="min-width: 100px"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onSort(prop.node.orgRootId)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :color="item.color" :name="item.icon" />
|
||||
</q-item-section>
|
||||
<div>
|
||||
<q-item-section> {{ item.label }}หน่วยงาน </q-item-section>
|
||||
</div>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</template>
|
||||
</q-tree>
|
||||
|
||||
<h5>orgRootId = {{ idVal }}</h5>
|
||||
<div>
|
||||
{{ dataObject }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
362
src/modules/02_organization/views/main.vue
Normal file
362
src/modules/02_organization/views/main.vue
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import type { DataOption } 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/TreeView.vue";
|
||||
import StructureView from "@/modules/02_organization/components/StructureMain.vue";
|
||||
import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
|
||||
import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* 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<DataOption[]>([]); // List ประวัติโครงสร้าง
|
||||
const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
|
||||
const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
|
||||
const count = ref<number>(0);
|
||||
|
||||
/**
|
||||
* List เพิ่มโครงสร้าง
|
||||
*/
|
||||
const itemStructure = ref<DataOption[]>([
|
||||
{
|
||||
id: "NEW",
|
||||
name: "สร้างใหม่",
|
||||
},
|
||||
{
|
||||
id: "ORG",
|
||||
name: "ทำสำเนาเฉพาะโครงสร้าง",
|
||||
},
|
||||
{
|
||||
id: "ORG_POSITION",
|
||||
name: "ทำสำเนาโครงสร้างและตำแหน่ง",
|
||||
},
|
||||
{
|
||||
id: "ORG_POSITION_PERSON",
|
||||
name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
|
||||
*/
|
||||
function fetchOrganizationActive() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.activeOrganization)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
if (data) {
|
||||
store.fetchDataActive(data);
|
||||
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 เรียกข้อมูลประวัติโครงสร้าง
|
||||
*/
|
||||
function fetchHistory() {
|
||||
http
|
||||
.get(config.API.organizationHistoryNew)
|
||||
.then((res) => {
|
||||
const data = 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,
|
||||
}));
|
||||
})
|
||||
.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++;
|
||||
}
|
||||
|
||||
/**
|
||||
* lifecycleHook
|
||||
*/
|
||||
onMounted(async () => {
|
||||
store.typeOrganizational = "current";
|
||||
await fetchOrganizationActive();
|
||||
await 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
|
||||
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
|
||||
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
|
||||
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="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.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</q-btn-group>
|
||||
|
||||
<q-btn-dropdown
|
||||
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-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"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="tree" style="padding: 0px">
|
||||
<StructureView v-if="store.statusView === 'tree'" />
|
||||
</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"
|
||||
:fetchActive="fetchOrganizationActive"
|
||||
/>
|
||||
|
||||
<!-- รายละเอียดตำแหน่ง -->
|
||||
<!-- <DialogPositionDetail v-model:position-detail="modalPositionDetail" /> -->
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue