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

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>