ui พ้นราชการ

src/modules/06_retirement/components/ListRetirement/AddList.vue

@@ -135,7 +135,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
     icon="mdi-plus"
     size="md"
     @click="modal = true"
-  ></q-btn>
+  >
+    <q-tooltip>เพิ่มรายชื่อ</q-tooltip></q-btn
+  >
 
   <q-dialog v-model="modal">
     <q-card style="width: 850px; max-width: 80vw" class="q-px-sm q-pb-md">

src/modules/06_retirement/components/ListRetirement/TableList.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import AddList from "../ListRetirement/AddList.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 
+const route = useRoute();
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const {} = mixin;
+const no = route.params.id;
+const modalNote = ref<boolean>(false);
+const note = ref<string>("");
 
+onMounted(() => {
+  console.log(no);
+});
 const columns = ref<any["columns"]>([
   {
     name: "index",
@@ -104,6 +112,12 @@ const columns = ref<any["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "note",
+    align: "left",
+    label: "",
+    field: "",
+  },
   {
     name: "button",
     align: "left",
@@ -160,6 +174,7 @@ const visibleColumns = ref<any>([
   "govGroup",
   "govOffice",
   "bureau",
+  "note",
   "button",
 ]);
 const filter = ref<string>("");
@@ -183,6 +198,22 @@ const clickDelete = () => {
 const backHistory = () => {
   window.history.back();
 };
+const saveNote = () => {
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูลข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล");
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <template>
@@ -203,6 +234,32 @@ const backHistory = () => {
     <q-card class="col-12 q-pa-md">
       <q-toolbar>
         <AddList />
+        <q-btn flat round color="blue-12" icon="save">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+        <q-btn color="primary" flat round icon="download">
+          <q-menu>
+            <q-list style="min-width: 100px">
+              <q-item clickable>
+                <q-item-section avatar>
+                  <q-icon color="red" name="mdi-file-pdf" />
+                </q-item-section>
+                <q-item-section>ไฟล .PDF</q-item-section>
+              </q-item>
+              <q-item clickable>
+                <q-item-section avatar>
+                  <q-icon color="green" name="mdi-file-excel" />
+                </q-item-section>
+                <q-item-section>ไฟล .xls</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+        </q-btn>
+        <q-btn flat round color="light-blue" icon="upload">
+          <q-tooltip>อัพโหลดไฟล์</q-tooltip>
+        </q-btn>
+
         <q-space />
         <q-tabs shrink>
           <q-input
@@ -287,6 +344,19 @@ const backHistory = () => {
                 props.row.govOffice
               }}</q-td>
               <q-td key="bureau" :props="props">{{ props.row.bureau }}</q-td>
+              <q-td>
+                <q-btn
+                  flat
+                  round
+                  class="text-teal-5"
+                  icon="mdi-note"
+                  size="md"
+                  v-if="no !== undefined"
+                  @click="(modalNote = true), (note = '')"
+                >
+                  <q-tooltip>โน้ต</q-tooltip></q-btn
+                >
+              </q-td>
               <q-td>
                 <q-btn
                   flat
@@ -296,13 +366,6 @@ const backHistory = () => {
                   size="md"
                   @click="clickDelete"
                 />
-                <q-btn
-                  flat
-                  round
-                  class="text-teal-5"
-                  icon="mdi-eye"
-                  size="md"
-                />
               </q-td>
             </q-tr>
           </template>
@@ -310,6 +373,42 @@ const backHistory = () => {
       </div>
     </q-card>
   </div>
+
+  <!-- note -->
+  <q-dialog v-model="modalNote">
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-card-section class="q-pt-none">
+        <q-toolbar class="q-py-md">
+          <q-toolbar-title class="header-text text-weight-bolder"
+            >กรอกเหตุผล
+          </q-toolbar-title>
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="modalNote = false"
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-input
+          outlined
+          dense
+          lazy-rules
+          v-model="note"
+          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+          :label="`${'กรอกเหตุผล'}`"
+          type="textarea"
+        />
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn  label="บักทึก" color="secondary" @click="saveNote" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style lang="scss" scope>
@@ -339,4 +438,7 @@ const backHistory = () => {
     top: 0;
   }
 }
+.q-btn-dropdown__arrow {
+  display: none;
+}
 </style>