popup หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ

src/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import Header from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+/** ปิด Dialog */
+function closeDialog() {
+  modal.value = !modal.value;
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <Header
+        tittle="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section> </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>

src/modules/13_salary/components/SalaryLists/TabMain.vue

@@ -4,6 +4,7 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
+import DialogInfoCriteria from "@/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue";
 
 /** importType*/
 import type { DataOption } from "@/modules/13_salary/interface/index/Main";
@@ -281,6 +282,7 @@ function onClickDownload(data: DataOption) {
   //   });
 }
 
+const modalDialogInfoCriteria = ref<boolean>(false);
 onMounted(async () => {
   await fetchDataQuota(store.groupId);
   await fetchDataPeriod(store.groupId);
@@ -305,6 +307,19 @@ onMounted(async () => {
     >
       <q-tab :name="item.name" :label="item.lable" />
     </div>
+
+    <q-space />
+    <q-btn
+      dense
+      flat
+      round
+      icon="info"
+      color="info"
+      class="q-mr-sm"
+      @click="() => (modalDialogInfoCriteria = true)"
+    >
+      <q-tooltip>หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ</q-tooltip>
+    </q-btn>
   </q-tabs>
   <q-separator />
   <q-tab-panels v-model="store.tabGroup" animated class="bg-grey-1">
@@ -442,6 +457,8 @@ onMounted(async () => {
       </q-card>
     </q-tab-panel>
   </q-tab-panels>
+
+  <DialogInfoCriteria v-model:modal="modalDialogInfoCriteria" />
 </template>
 
 <style scoped>