ปรับ UI เครื่องราช จัดการ

src/modules/07_insignia/components/2_Manage/Tab1.vue

@@ -10,6 +10,7 @@ import config from "@/app.config";
 import { useRouter } from "vue-router";
 
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
+import DialogInformation from "@/components/Dialogs/Information.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import btnDownloadFile from "./downloadFile.vue";
 
@@ -34,6 +35,26 @@ const modalAdd = ref<boolean>(false);
 const modalEdit = ref<boolean>(false);
 const rowid = ref<string>("");
 const organization = ref<string>("");
+// หมายเหตุ
+const dialogNote = ref<boolean>(false);
+const dialogTitle = ref<string>("");
+const dialogDesc = ref<string>("");
+
+// แจ้งเตือน
+const dialogWarn = ref<boolean>(false);
+const checkboxData = ref<any>([
+  { id: 1, name: "มีโทษทางวินัย", val: true },
+  {
+    id: 2,
+    name: "ไม่ได้เลื่อนเงินเดือน/ไม่ได้เลื่อนขั้นเงินเดือน เนื่องจากลาเกิน",
+    val: false,
+  },
+  {
+    id: 3,
+    name: "ผลการประเมินการปฏิบัติราชการในรอบ 5 ปี ต่ำกว่าระดับดี (น้อยกว่าร้อยละ 70)",
+    val: false,
+  },
+]);
 
 const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const visibleColumns = ref<string[]>([
@@ -48,6 +69,8 @@ const visibleColumns = ref<string[]>([
   "insigniaSend",
   "insigniaLevel",
   "dateSend",
+  "note",
+  "warn",
 ]);
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -150,6 +173,24 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "warn",
+    align: "left",
+    label: "แจ้งเตือน",
+    sortable: true,
+    field: "",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 const columns2 = ref<QTableProps["columns"]>([
@@ -183,14 +224,14 @@ const columns2 = ref<QTableProps["columns"]>([
   // {
   //   name: "position",
   //   required: true,
-  //   label: "ตำแหน่งในสายงาน",
+  //   label: "หมายเหตุ",
   //   field: "position",
   //   align: "left",
   // },
   // {
   //   name: "level",
   //   required: true,
-  //   label: "ระดับ",
+  //   label: "แจ้งเตื่อน",
   //   field: "level",
   //   align: "left",
   // },
@@ -587,10 +628,22 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
   if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-
 const closeModalEdit = () => {
   modalEdit.value = false;
 };
+// เปิด popup หมายเหตุ
+const clickShowreson = (name: string, requestNote: string) => {
+  dialogTitle.value = "หมายเหตุ" + name;
+  dialogDesc.value = requestNote;
+  dialogNote.value = true;
+};
+// ปิด popup หมายเหตุ
+const clickCloseReson = () => {
+  dialogNote.value = false;
+};
+const clickShowWarn = () => {
+  dialogWarn.value = true;
+};
 </script>
 
 <template>
@@ -752,6 +805,7 @@ const closeModalEdit = () => {
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
               <q-th></q-th>
+
               <q-th
                 auto-width
                 v-if="
@@ -801,6 +855,36 @@ const closeModalEdit = () => {
               <q-td key="dateSend" :props="props">
                 {{ props.row.dateSend }}
               </q-td>
+              <q-td key="note" class="text-center">
+                <q-btn
+                  v-if="props.rowIndex == 2"
+                  icon="mdi-information-outline"
+                  size="12px"
+                  color="blue"
+                  flat
+                  round
+                  dense
+                  @click.stop="
+                    clickShowreson(props.row.name, 'จะได้เลื่อนเงินเดือน')
+                  "
+                >
+                  <q-tooltip>หมายเหตุ</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td key="warn" class="text-center">
+                <q-btn
+                  v-if="props.rowIndex == 1"
+                  icon="mdi-information-outline"
+                  size="12px"
+                  color="red"
+                  flat
+                  round
+                  dense
+                  @click.stop="clickShowWarn"
+                >
+                  <q-tooltip>แจ้งเตือน</q-tooltip></q-btn
+                >
+              </q-td>
 
               <q-td
                 v-close-popup
@@ -1142,4 +1226,52 @@ const closeModalEdit = () => {
     :click-close="closemodelPopupDelete"
     :savaForm="savaReasonDelete"
   />
+  <!--  หมายเหตุ -->
+  <DialogInformation
+    :modal="dialogNote"
+    :title="dialogTitle"
+    :desc="dialogDesc"
+    :click-close="clickCloseReson"
+  />
+  <!-- แจ้งเตือน -->
+  <q-dialog v-model="dialogWarn">
+    <q-card style="width: 800px; max-width: 80vw">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="text-h6">แจ้งเตือน </q-toolbar-title>
+
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+      <div class="q-pa-md">
+        <div class="q-gutter-sm">
+          <q-item
+            tag="label"
+            v-ripple
+            v-for="list in checkboxData"
+            :key="list.id"
+          >
+            <q-item-section avatar>
+              <q-checkbox
+                v-model="list.val"
+                :val="`${list.id}`"
+                color="teal"
+                disable
+              />
+              <!-- <q-radio v-model="checkboxList" :val="list.id" color="teal" /> -->
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ list.name }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
 </template>