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

Merge branch 'develop' into devTee

Browse source 
# Conflicts:
#	src/modules/02_organizationalNew/views/main.vue
This commit is contained in:
setthawutttty 2024-01-26 12:08:41 +07:00
commit 639ee64df9
4 changed files with 156 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/modules/02_organizationalNew/components/listView.vue
View file

@ -1,15 +1,39 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, onMounted } from "vue";
import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
const showData = ref<boolean>(false);
const nodeTree = ref<any>();
async function fetchDataTree() {
const data = [
{
organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
organizationLevel: 0,
lazy: true,
},
{
organizationName: "สำนักปลัดกรุงเทพมหานคร",
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
organizationLevel: 0,
lazy: true,
},
];
nodeTree.value = data;
}
onMounted(() => {
fetchDataTree();
});
</script>
<template>
<div class="col-12">
<q-card bordered class="col-12 row caedNone">
<div class="col-xs-12 col-sm-3 row">
<div class="col-12 row no-wrap bg-grey-1">
<TreeView />
<TreeView v-model:nodeTree="nodeTree" />
<div class="col-12 row">
<q-separator :vertical="!$q.screen.lt.md" />

102
src/modules/02_organizationalNew/components/mainTree.vue
View file

@ -1,14 +1,16 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
/** importComponents*/
import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
const stroe = useOrganizational();
const $q = useQuasar();
const showData = ref<boolean>(false);
const listAdd = ref<any>([
{
label: "เพิ่มส่วนราชการ",
@ -48,12 +50,13 @@ const listAdd = ref<any>([
},
{
label: "แก้ไขสถานะ",
icon: "checklist_rtl",
icon: "rule",
val: "STATUS",
color: "yellow-9",
},
]);
const nodeTEST = defineModel<any>("nodeTree", { required: true });
const filter = ref<string>("");
const nodes = ref<Array<any>>([]);
const lazy = ref(nodes);
@ -136,21 +139,25 @@ const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
organizationName: "กองบริหารทั่วไป",
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
organizationLevel: 1,
organizationNo: "00011",
},
{
organizationName: "กองสรรหาบุคคล",
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
organizationLevel: 1,
organizationNo: "00011",
},
{
organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
organizationLevel: 1,
organizationNo: "00011",
children: [
{
organizationName: "ฝ่ายบริหารงานทั่วไป",
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
organizationLevel: 2,
organizationNo: "00011",
children: [
{
organizationName: "กลุ่มงานวิเคราะห์การพัฒนาทรัพยากรบุคคล",
@ -217,30 +224,45 @@ function searchAndReplace(
}
}
const dialogAgency = ref<boolean>(false);
function onClickAgency() {
dialogAgency.value = !dialogAgency.value;
}
watch(
() => nodeTEST.value,
() => {
nodes.value = nodeTEST.value;
}
);
onMounted(async () => {
nodes.value = [
{
organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
organizationLevel: 0,
lazy: true,
},
{
organizationName: "สำนักปลัดกรุงเทพมหานคร",
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
organizationLevel: 0,
lazy: true,
},
// {
// organizationName: "data empty",
// lazy: true,
// },
// {
// organizationName: "Node is not expandable",
// expandable: false,
// children: [{ organizationName: "Some node" }],
// },
];
// setTimeout(() => {
// console.log(nodessd.value);
// }, 200);
// nodes.value = [
// {
// organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
// organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
// organizationLevel: 0,
// lazy: true,
// },
// {
// organizationName: "สำนักปลัดกรุงเทพมหานคร",
// organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
// organizationLevel: 0,
// lazy: true,
// },
// // {
// // organizationName: "data empty",
// // lazy: true,
// // },
// // {
// // organizationName: "Node is not expandable",
// // expandable: false,
// // children: [{ organizationName: "Some node" }],
// // },
// ];
});
</script>
@ -249,8 +271,15 @@ onMounted(async () => {
<div class="q-gutter-md">
<div class="row q-col-gutter-sm">
<div class="col-2" v-if="stroe.typeOrganizational === 'draft'">
<q-btn dense flat round color="primary" icon="add">
<q-tooltip>เพิ่ม</q-tooltip>
<q-btn
dense
flat
round
color="primary"
icon="add"
@click="onClickAgency"
>
<q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
</q-btn>
</div>
@ -278,10 +307,10 @@ onMounted(async () => {
"
>
<q-tree
class="q-pa-sm"
class="q-pa-md q-gutter-sm"
dense
default-expand-all
selected-color="blue-6"
selected-color="primary"
:nodes="lazy"
node-key="organizationId"
label-key="organizationName"
@ -299,15 +328,18 @@ onMounted(async () => {
<q-btn
flat
dense
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
v-if="stroe.typeOrganizational === 'draft'"
color="grey-13"
>
<q-menu>
<q-list
style="min-width: 100px"
dense
v-for="(item, index) in listAdd"
:key="index"
style="min-width: 100px"
>
<q-item
clickable
@ -327,10 +359,18 @@ onMounted(async () => {
</q-menu>
</q-btn>
</template>
<template v-slot:default-body="prop">
<div v-if="prop.node.organizationNo">
<span class="text-grey-13">{{ prop.node.organizationNo }}</span>
</div>
</template>
</q-tree>
</div>
</div>
</div>
<DialogAgency :modal="dialogAgency" :close="onClickAgency" />
</template>
<style scoped></style>

31
src/modules/02_organizationalNew/components/tableTree.vue
View file

@ -4,6 +4,9 @@ import { ref } from "vue";
/** importType*/
import type { QTableProps } from "quasar";
/** importComponents*/
import DialogFormPosotion from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@ -81,23 +84,36 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const rows = ref<any>([]);
const dialogPosition = ref<boolean>(false);
function onClickPosition() {
dialogPosition.value = !dialogPosition.value;
}
</script>
<template>
<!-- TOOLBAR -->
<div class="col-12">
<q-toolbar style="padding: 0">
<div v-if="stroe.typeOrganizational === 'draft'">
<q-btn flat round dense color="primary" icon="add">
<q-tooltip>เพิ่ม</q-tooltip></q-btn
<q-btn
flat
round
dense
color="primary"
icon="add"
@click="onClickPosition"
>
<q-tooltip>เพิ่มตำแหน่ง</q-tooltip></q-btn
>
<q-btn flat round dense color="blue" icon="filter_list">
<q-tooltip>ค้นหา</q-tooltip>
<q-tooltip>จัดลำดับ</q-tooltip>
</q-btn>
</div>
<q-btn flat round dense color="blue-10" icon="save_alt">
<q-menu>
<q-list
dense
style="min-width: 100px"
v-for="(item, index) in document"
:key="index"
@ -117,7 +133,11 @@ const rows = ref<any>([]);
v-model="showData"
label="แสดงตำแหน่งทั้งหมด"
color="primary"
/>
>
<q-tooltip
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
>
</q-checkbox>
</div>
<div><q-input outlined dense v-model="filter" label="ค้นหา" /></div>
</div>
@ -137,6 +157,7 @@ const rows = ref<any>([]);
dense
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
:filter="filter"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -171,6 +192,8 @@ const rows = ref<any>([]);
</template> -->
</d-table>
</div>
<DialogFormPosotion :modal="dialogPosition" :close="onClickPosition" />
</template>
<style scoped></style>

37
src/modules/02_organizationalNew/views/main.vue
View file

@ -5,6 +5,8 @@ import { ref } from "vue";
import ListView from "@/modules/02_organizationalNew/components/listView.vue";
import StructureView from "@/modules/02_organizationalNew/components/structureView.vue";
import DialogFormNewStructure from "@/modules/02_organizationalNew/components/DialogNewStructure.vue";
import DialogDateTime from "@/modules/02_organizationalNew/components/DialogFormDateTime.vue";
import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@ -12,8 +14,7 @@ import { useOrganizational } from "@/modules/02_organizationalNew/store/organiza
const modalNewStructure = ref<boolean>(false);
const stroe = useOrganizational();
const isStatusData = ref<boolean>(true);
const isStatusData = ref<boolean>(false);
const itemStructure = ref<any>([
{
val: "NEW",
@ -32,6 +33,16 @@ const itemStructure = ref<any>([
name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
},
]);
const modalDateTime = ref<boolean>(false);
function onClickDateTime() {
modalDateTime.value = !modalDateTime.value;
}
const modalHistory = ref<boolean>(false);
function onClickHistory() {
modalHistory.value = !modalHistory.value;
}
</script>
<template>
<q-btn
@ -45,7 +56,13 @@ const itemStructure = ref<any>([
<q-space />
<div class="toptitle row" v-if="stroe.typeOrganizational === 'draft'">
<q-btn color="indigo-9" icon="alarm" label="ตั้งเวลาเผยแพร่"> </q-btn>
<q-btn
color="indigo-9"
icon="alarm"
label="ตั้งเวลาเผยแพร่"
@click="onClickDateTime"
>
</q-btn>
</div>
</div>
@ -108,6 +125,7 @@ const itemStructure = ref<any>([
<q-btn-dropdown color="green" label="ปรับโครงสร้าง">
<q-list>
<q-item
dense
clickable
v-close-popup
v-for="(item, index) in itemStructure"
@ -120,7 +138,13 @@ const itemStructure = ref<any>([
</q-list>
</q-btn-dropdown>
<q-btn flat round color="primary" icon="history">
<q-btn
flat
round
color="primary"
icon="history"
@click="onClickHistory"
>
<q-tooltip>ประวัติโครงสร้าง</q-tooltip>
</q-btn>
<q-space />
@ -134,7 +158,7 @@ const itemStructure = ref<any>([
<q-btn
flat
round
icon="account_tree"
icon="mdi-sitemap"
:color="stroe.statusView === 'tree' ? 'grey-7' : 'grey-4'"
@click="stroe.statusView = 'tree'"
/>
@ -150,6 +174,9 @@ const itemStructure = ref<any>([
</q-card>
<DialogFormNewStructure v-model:new-structure="modalNewStructure" />
<DialogDateTime :modal="modalDateTime" :close="onClickDateTime" />
<DialogHistory :modal="modalHistory" :close="onClickHistory" />
</template>
<style scoped></style>