dialog โครงสร้างอัตรากำลัง
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
4f025b2c12
commit
5a09c6e507
3 changed files with 125 additions and 37 deletions
|
|
@ -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: "เพิ่มส่วนราชการ",
|
||||
|
|
@ -54,6 +56,7 @@ const listAdd = ref<any>([
|
|||
},
|
||||
]);
|
||||
|
||||
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,9 +328,11 @@ 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
|
||||
|
|
@ -327,10 +358,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>
|
||||
|
|
|
|||
|
|
@ -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,17 +84,29 @@ 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>
|
||||
|
||||
|
|
@ -117,7 +132,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 +156,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 +191,8 @@ const rows = ref<any>([]);
|
|||
</template> -->
|
||||
</d-table>
|
||||
</div>
|
||||
|
||||
<DialogFormPosotion :modal="dialogPosition" :close="onClickPosition" />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import { ref } from "vue";
|
|||
/** importComponents*/
|
||||
import ListView from "@/modules/02_organizationalNew/components/listView.vue";
|
||||
import StructureView from "@/modules/02_organizationalNew/components/structureView.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";
|
||||
|
|
@ -11,7 +13,6 @@ import { useOrganizational } from "@/modules/02_organizationalNew/store/organiza
|
|||
const stroe = useOrganizational();
|
||||
|
||||
const isStatusData = ref<boolean>(true);
|
||||
|
||||
const itemStructure = ref<any>([
|
||||
{
|
||||
val: "NEW",
|
||||
|
|
@ -30,13 +31,29 @@ 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>
|
||||
<div class="row">
|
||||
<div class="toptitle text-dark row items-center">โครงสร้างอัตรากำลัง</div>
|
||||
<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>
|
||||
|
||||
|
|
@ -111,7 +128,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 />
|
||||
|
|
@ -125,7 +148,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'"
|
||||
/>
|
||||
|
|
@ -139,6 +162,10 @@ const itemStructure = ref<any>([
|
|||
</q-card>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<DialogDateTime :modal="modalDateTime" :close="onClickDateTime" />
|
||||
|
||||
<DialogHistory :modal="modalHistory" :close="onClickHistory" />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue