dialog โครงสร้างอัตรากำลัง

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>