From 5a09c6e507618f2aac292711144bfbf7a0e48285 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 26 Jan 2024 11:18:36 +0700
Subject: [PATCH] =?UTF-8?q?dialog=20=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=AD=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mainTree.vue                   | 97 +++++++++++++------
 .../components/tableTree.vue                  | 30 +++++-
 .../02_organizationalNew/views/main.vue       | 35 ++++++-
 3 files changed, 125 insertions(+), 37 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 4b8db9e09..19f3c1069 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -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>
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index ca797b7ca..cacc9a8ff 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -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>
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index e4ecbaa38..298053226 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -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>