From db99caaf0271ebe4638be780da45a3c96fec7062 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 23 Feb 2024 17:22:51 +0700
Subject: [PATCH] tabGroup

---
 .../components/SalaryLists/TableTabType1.vue  |   8 +-
 .../components/SalaryLists/TableTabType2.vue  | 282 +++++++++++++++++-
 2 files changed, 284 insertions(+), 6 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType1.vue b/src/modules/13_salary/components/SalaryLists/TableTabType1.vue
index 7832dc9f9..c155af576 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTabType1.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTabType1.vue
@@ -100,9 +100,9 @@ const visibleColumns = ref<string[]>([
 ]);
 const rows = ref<any>([
   {
-    fullName: "sd",
-    position: "sd",
-    org: "sd",
+    fullName: "นางสาวจักกริน ทองดี",
+    position: "ผู้อำนวยการ",
+    org: "กลุ่มงานช่วยนักบริหาร",
     isResult: true,
     isDuration: true,
     isPunish: false,
@@ -157,6 +157,7 @@ const filter = ref<string>("");
     bordered
     :paging="true"
     dense
+    :filter="filter"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
   >
@@ -165,7 +166,6 @@ const filter = ref<string>("");
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
-        <q-th auto-width></q-th>
       </q-tr>
     </template>
     <template v-slot:body="props">
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType2.vue b/src/modules/13_salary/components/SalaryLists/TableTabType2.vue
index 058e5ba78..5625fe9d5 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTabType2.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTabType2.vue
@@ -1,6 +1,284 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  NewPagination,
+  ItemsMenu,
+} from "@/modules/13_salary/interface/index/Main";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posPath",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "posPath",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "center",
+    label: "ตำแหน่งประเภทระดับ",
+    sortable: false,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutive",
+    align: "center",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: false,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salary",
+    align: "center",
+    label: "เงินเดือนฐาน",
+    sortable: false,
+    field: "salary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salary2",
+    align: "center",
+    label: "จำนวนเงินที่ใช้เลื่อน",
+    sortable: false,
+    field: "salary2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "posNo",
+  "fullName",
+  "posPath",
+  "posLevel",
+  "posExecutive",
+  "salary",
+  "salary2",
+]);
+const rows = ref<any>([
+  {
+    posNo: "กบห.1",
+    fullName: "นางสาวจักกริน ทองดี",
+    posPath: "ผู้อำนวยการ",
+    posLevel: true,
+    posExecutive: true,
+    salary: false,
+    salary2: true,
+  },
+]);
+
+/** List Mune*/
+const itemMenu = ref<ItemsMenu[]>([
+  {
+    label: "แก้ไขเงินเดือน",
+    icon: "edit",
+    color: "edit",
+    type: "edit",
+  },
+  {
+    label: "ย้ายกลุ่ม",
+    icon: "mdi-account-arrow-right-outline",
+    color: "indigo-6",
+    type: "moveGroup",
+  },
+  {
+    label: "ย้ายขั้น",
+    icon: "mdi-account-arrow-left-outline",
+    color: "green-6",
+    type: "moveStep",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    color: "red",
+    type: "delete",
+  },
+]);
+const filter = ref<string>("");
+
+function onClickDelete() {
+  dialogRemove($q, () => {
+    success($q, "ลบข้อมูลสำเร็จ");
+  });
+}
+</script>
 <template>
-  <div>222222222222222222</div>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn flat round dense icon="add">
+      <q-tooltip>เพิ่ม </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      debounce="300"
+      outlined
+      v-model="filter"
+      placeholder="ค้นหา"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      for="#select"
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+    />
+  </q-toolbar>
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :filter="filter"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width></q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name === 'no'">
+            {{ props.rowIndex + 1 }}
+          </div>
+          <div v-else-if="col.name === 'posLevel'">
+            <q-icon name="close" size="1.5em" />
+          </div>
+          <div v-else-if="col.name === 'posExecutive'">
+            <q-icon name="close" size="1.5em" />
+          </div>
+
+          <div v-else-if="col.name === 'salary'">
+            <q-icon name="close" size="1.5em" />
+          </div>
+          <div v-else-if="col.name === 'salary2'">
+            <q-icon name="close" size="1.5em" />
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td>
+          <q-btn
+            flat
+            dense
+            icon="mdi-dots-vertical"
+            class="q-pa-none q-ml-xs"
+            color="grey-13"
+            size="12px"
+          >
+            <q-menu>
+              <q-list dense style="min-width: 150px">
+                <q-item
+                  v-for="(item, index) in itemMenu"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="item.type === 'delete' ? onClickDelete() : null"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        :color="item.color"
+                        size="17px"
+                        :name="item.icon"
+                      />
+                      <div class="q-pl-md">{{ item.label }}</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <!-- <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="formQuery.page"
+        active-color="primary"
+        color="dark"
+        :max="maxPage"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template> -->
+  </d-table>
 </template>
 
 <style scoped></style>