From 8c68986549f374348011e7059d92d66ca58f503a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 22 Feb 2024 17:27:05 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20maxpage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/registry/registry.vue          |   1 +
 .../components/probation/MainProbation.vue    |   1 +
 .../components/SalaryLists/TabGroup.vue       | 180 ++++++++++++++
 .../components/SalaryLists/TableTabType1.vue  | 233 ++++++++++++++++++
 .../components/SalaryLists/TableTabType2.vue  |   6 +
 .../components/SalaryLists/TableTabType3.vue  |   6 +
 .../components/SalaryLists/TableTabType4.vue  |   6 +
 .../13_salary/store/SalaryListsStore.ts       |   8 +
 src/modules/13_salary/views/salaryChart.vue   |   1 +
 src/modules/13_salary/views/salaryLists.vue   |  14 +-
 src/modules/13_salary/views/salaryRate.vue    |   1 +
 11 files changed, 455 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/13_salary/components/SalaryLists/TableTabType1.vue
 create mode 100644 src/modules/13_salary/components/SalaryLists/TableTabType2.vue
 create mode 100644 src/modules/13_salary/components/SalaryLists/TableTabType3.vue
 create mode 100644 src/modules/13_salary/components/SalaryLists/TableTabType4.vue
 create mode 100644 src/modules/13_salary/store/SalaryListsStore.ts

diff --git a/src/modules/04_registryNew/components/registry/registry.vue b/src/modules/04_registryNew/components/registry/registry.vue
index 758c15e17..0527e9303 100644
--- a/src/modules/04_registryNew/components/registry/registry.vue
+++ b/src/modules/04_registryNew/components/registry/registry.vue
@@ -476,6 +476,7 @@ async function changeCardID(citizenId: string | number | null) {
           active-color="primary"
           color="dark"
           :max="maxPage"
+          :max-pages="5"
           size="sm"
           boundary-links
           direction-links
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index fe8f0f544..2b519e827 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -752,6 +752,7 @@ onMounted(async () => {
                   size="sm"
                   boundary-links
                   direction-links
+                  :max-pages="5"
                 ></q-pagination>
               </template>
             </d-table>
diff --git a/src/modules/13_salary/components/SalaryLists/TabGroup.vue b/src/modules/13_salary/components/SalaryLists/TabGroup.vue
index e69de29bb..dd31657cb 100644
--- a/src/modules/13_salary/components/SalaryLists/TabGroup.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabGroup.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import TableTabType1 from "@/modules/13_salary/components/SalaryLists/TableTabType1.vue";
+import TableTabType2 from "@/modules/13_salary/components/SalaryLists/TableTabType2.vue";
+import TableTabType3 from "@/modules/13_salary/components/SalaryLists/TableTabType3.vue";
+import TableTabType4 from "@/modules/13_salary/components/SalaryLists/TableTabType4.vue";
+
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+const store = useSalaryListSDataStore();
+const itemsTabGroup = ref([
+  {
+    lable: "กลุ่ม 1",
+    name: "group1",
+  },
+  {
+    lable: "กลุ่ม 2",
+    name: "group2",
+  },
+]);
+
+const itemsTabType = ref([
+  {
+    lable: "รายชื่อถือครอง",
+    name: "tab1",
+  },
+  {
+    lable: "1 ขั้น",
+    name: "tab2",
+  },
+  {
+    lable: "ครึ่งขั้น",
+    name: "tab3",
+  },
+  {
+    lable: "ไม่ได้เลือก",
+    name: "tab4",
+  },
+]);
+
+const itemsCard = ref([
+  {
+    lable: "จำนวนคนทั้งหมด",
+    name: "group1",
+    color: "secondary",
+  },
+  {
+    lable: "ของจำนวนคน",
+    name: "group2",
+    color: "light-blue-4",
+  },
+  {
+    lable: "เลือกไปแล้ว",
+    name: "group2",
+    color: "primary",
+  },
+  {
+    lable: "คงเหลือโควตา",
+    name: "group2",
+    color: "indigo-6",
+  },
+]);
+
+const splitterModel = ref<number>(15);
+
+function changeTabGroup() {
+  store.tabType = "tab1";
+}
+
+function changeTabType(name: string) {
+  console.log(name);
+}
+</script>
+
+<template>
+  <q-tabs
+    v-model="store.tabGroup"
+    dense
+    class="text-grey"
+    active-color="primary"
+    active-class="bg-teal-1"
+    indicator-color="primary"
+    align="left"
+  >
+    <div
+      v-for="(item, index) in itemsTabGroup"
+      :key="index"
+      @click="changeTabGroup"
+    >
+      <q-tab :name="item.name" :label="item.lable" />
+    </div>
+  </q-tabs>
+
+  <q-separator />
+  <q-tab-panels v-model="store.tabGroup" animated class="bg-grey-1">
+    <q-tab-panel
+      style="padding: 0px"
+      v-for="(item, index) in itemsTabGroup"
+      :key="index"
+      :name="item.name"
+    >
+      <div class="row col-12 q-pa-md">
+        <div class="row col-12 items-start q-gutter-md items-center">
+          <div v-for="(item, index) in itemsCard" :key="index" class="my-card">
+            <q-card>
+              <q-card-section>
+                <div class="row items-center no-wrap">
+                  <div class="col">
+                    <div class="">{{ item.lable }}</div>
+                  </div>
+
+                  <div :class="`text-${item.color} text-bold`">1</div>
+                </div>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="row col justify-end items-center">
+            <q-btn color="blue-5" icon="download" label="ดาว์นโหลด" />
+          </div>
+        </div>
+      </div>
+
+      <q-separator />
+
+      <q-card flat bordered>
+        <q-splitter v-model="splitterModel" disable>
+          <template v-slot:before>
+            <q-tabs
+              v-model="store.tabType"
+              vertical
+              dense
+              class="text-grey"
+              active-color="blue-5"
+              active-class="bg-blue-1"
+              indicator-color="blue-5"
+              align="left"
+            >
+              <div v-for="(item, index) in itemsTabType" :key="index">
+                <q-tab
+                  :name="item.name"
+                  :label="item.lable"
+                  @click="changeTabType(item.name)"
+                />
+              </div>
+            </q-tabs>
+          </template>
+          <template v-slot:after>
+            <q-tab-panels
+              v-model="store.tabType"
+              animated
+              swipeable
+              vertical
+              transition-prev="jump-up"
+              transition-next="jump-up"
+            >
+              <q-tab-panel
+                class="q-pa-md"
+                v-for="(item, index) in itemsTabType"
+                :key="index"
+                :name="item.name"
+              >
+                <TableTabType1 v-if="index + 1 === 1" />
+                <TableTabType2 v-if="index + 1 === 2" />
+                <TableTabType3 v-if="index + 1 === 3" />
+                <TableTabType4 v-if="index + 1 === 4" />
+              </q-tab-panel>
+            </q-tab-panels>
+          </template>
+        </q-splitter>
+      </q-card>
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<style lang="sass" scoped>
+.my-card
+  width: 100%
+  max-width: 200px
+</style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType1.vue b/src/modules/13_salary/components/SalaryLists/TableTabType1.vue
new file mode 100644
index 000000000..7832dc9f9
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/TableTabType1.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื้อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "สั่งกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isResult",
+    align: "center",
+    label: "ผลการประเมิน",
+    sortable: false,
+    field: "isResult",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isDuration",
+    align: "center",
+    label: "ระยะเวลา",
+    sortable: false,
+    field: "isDuration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isPunish",
+    align: "center",
+    label: "การลงโทษ",
+    sortable: false,
+    field: "isPunish",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isRetired",
+    align: "center",
+    label: "พ้นราชการ",
+    sortable: false,
+    field: "isRetired",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isRetired2",
+    align: "center",
+    label: "ขาดราชการ",
+    sortable: false,
+    field: "isRetired",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "position",
+  "org",
+  "isResult",
+  "isDuration",
+  "isPunish",
+  "isRetired",
+  "isRetired2",
+]);
+const rows = ref<any>([
+  {
+    fullName: "sd",
+    position: "sd",
+    org: "sd",
+    isResult: true,
+    isDuration: true,
+    isPunish: false,
+    isRetired: true,
+    isRetired2: false,
+  },
+]);
+
+const filter = ref<string>("");
+</script>
+<template>
+  <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
+    :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 === 'isResult'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="props.row.isResult"
+            />
+          </div>
+          <div v-else-if="col.name === 'isDuration'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="props.row.isDuration"
+            />
+          </div>
+          <div v-else-if="col.name === 'isPunish'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="props.row.isPunish"
+            />
+          </div>
+          <div v-else-if="col.name === 'isRetired'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="props.row.isRetired"
+            />
+          </div>
+          <div v-else-if="col.name === 'isRetired2'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="props.row.isRetired2"
+              false
+            />
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </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>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType2.vue b/src/modules/13_salary/components/SalaryLists/TableTabType2.vue
new file mode 100644
index 000000000..058e5ba78
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/TableTabType2.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>222222222222222222</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType3.vue b/src/modules/13_salary/components/SalaryLists/TableTabType3.vue
new file mode 100644
index 000000000..ecebac15b
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/TableTabType3.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>333333</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType4.vue b/src/modules/13_salary/components/SalaryLists/TableTabType4.vue
new file mode 100644
index 000000000..d3416b233
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/TableTabType4.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>4444444444</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/store/SalaryListsStore.ts b/src/modules/13_salary/store/SalaryListsStore.ts
new file mode 100644
index 000000000..504dc9b35
--- /dev/null
+++ b/src/modules/13_salary/store/SalaryListsStore.ts
@@ -0,0 +1,8 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
+  const tabGroup = ref<string>("group1");
+  const tabType = ref<string>("tab1");
+  return { tabGroup, tabType };
+});
diff --git a/src/modules/13_salary/views/salaryChart.vue b/src/modules/13_salary/views/salaryChart.vue
index 611a91217..2c57a3d1c 100644
--- a/src/modules/13_salary/views/salaryChart.vue
+++ b/src/modules/13_salary/views/salaryChart.vue
@@ -364,6 +364,7 @@ async function filterFn(page: number) {
             size="sm"
             boundary-links
             direction-links
+            :max-pages="5"
           ></q-pagination>
         </template>
       </d-table>
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index cf4e87628..00c235fc0 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -1,4 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TabGroup from "@/modules/13_salary/components/SalaryLists/TabGroup.vue";
+</script>
 
 <template>
   <div class="row items-center">
@@ -6,6 +8,14 @@
       รายการเงินเดือน
     </div>
   </div>
+
+  <q-card flat bordered>
+    <TabGroup />
+  </q-card>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style lang="sass" scoped>
+.my-card
+  width: 100%
+  max-width: 200px
+</style>
diff --git a/src/modules/13_salary/views/salaryRate.vue b/src/modules/13_salary/views/salaryRate.vue
index 1aaa946f0..887634fd9 100644
--- a/src/modules/13_salary/views/salaryRate.vue
+++ b/src/modules/13_salary/views/salaryRate.vue
@@ -364,6 +364,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
             size="sm"
             boundary-links
             direction-links
+            :max-pages="5"
           ></q-pagination>
         </template>
       </d-table>