From c7e6f701b2020f2f87fe7c81fb2f6703bfe184c9 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 13 Sep 2024 11:17:31 +0700
Subject: [PATCH] =?UTF-8?q?UI=20Template=20=E0=B8=AA=E0=B8=B3=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=A5=E0=B8=87=E0=B9=83=E0=B8=99?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?/=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/information/Other.vue         |   4 +-
 src/modules/05_command/views/salaryLists.vue | 379 +++++++++++++++----
 2 files changed, 298 insertions(+), 85 deletions(-)

diff --git a/src/components/information/Other.vue b/src/components/information/Other.vue
index d7886ebb..1b1dbaab 100644
--- a/src/components/information/Other.vue
+++ b/src/components/information/Other.vue
@@ -79,7 +79,7 @@
                     
                     :borderless="!edit"
                     :model-value="date2Thai(date)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่'}`]"
                     hide-bottom-space
                     :label="`${'วันที่'}`"
                   >
@@ -109,7 +109,7 @@
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
                 hide-bottom-space
                 :label="`${'รายละเอียด'}`"
                 @update:modelValue="clickEditRow"
diff --git a/src/modules/05_command/views/salaryLists.vue b/src/modules/05_command/views/salaryLists.vue
index 874bc5a0..8ff0486d 100644
--- a/src/modules/05_command/views/salaryLists.vue
+++ b/src/modules/05_command/views/salaryLists.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
-import { useQuasar } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/modules/05_command/stores/main";
 
 import type {
   ActiveOptions,
   ListTemplateSalary,
+  DateOption,
 } from "@/modules/05_command/interface/index/Main";
 
 import Header from "@/components/DialogHeader.vue";
@@ -26,35 +28,51 @@ const {
   messageError,
 } = mixin;
 
-const isActive = ref<string>(""); // สถานะของรายการคำสั่ง
-// options สถานะการใช้งาน
-const activeOptions = ref<ActiveOptions[]>([
-  {
-    value: true,
-    label: "Active",
-  },
-  {
-    value: false,
-    label: "InActive",
-  },
-]);
+const filter = ref<string>(""); // ตัวแปร ฟิลเตอร์
+const listOrder = ref<DateOption[]>([]);
+const activeOrderId = ref<string>(""); // ตัวแปรเก็บ id เพื่อเอาไป = class
 
 const dataForm = reactive<ListTemplateSalary>({
   id: null,
   name: "",
   status: false,
 });
-const lists = ref<ListTemplateSalary[]>([]); // list คำสั่ง
 const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก้ไข
 const dialogForm = ref<boolean>(false); // model คำสั่ง
 
-/**
- * ฟังก์ชั่นค้นหาคำสั่ง ตามสถานะ
- * @param val สถานะ true/false
- */
-function searchByStatus(val: string) {
-  console.log(val);
-}
+const rows = ref<ListTemplateSalary[]>([]);
+const visibleColumns = ref<String[]>(["no", "name", "status"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "center",
+    label: "สถานะการใช้งาน",
+    sortable: false,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
 
 /** เปิด dialog */
 function onDialogAdd() {
@@ -106,73 +124,79 @@ function onSubmit() {
 }
 
 /** เก็บ id list คำสั่งที่เลือก เพื่อใช้ class */
-function selectInbox(data: ListTemplateSalary) {
-  dataForm.id = data.id;
+function selectInbox(data: DateOption) {
+  activeOrderId.value = data.id;
+
+  fetchSalaryList();
 }
 
 /**
  * ฟังก์ชั่นดึงรายการประเภทคำสั่ง
  */
-async function fetchOrderType() {
-  lists.value = [
-    {
-      id: 1,
-      name: "เลื่อนเงินเดือน",
-      status: true,
-    },
-    {
-      id: 2,
-      name: "เลื่อนเงินเดือน (ดีเด่น)",
-      status: true,
-    },
-    {
-      id: 3,
-      name: "เลื่อนเงินเดือน (เพิ่มเติม)",
-      status: true,
-    },
+async function fetchSalaryList() {
+  showLoader();
+  setTimeout(() => {
+    rows.value = [
+      {
+        id: 1,
+        name: "เลื่อนเงินเดือน",
+        status: true,
+      },
+      {
+        id: 2,
+        name: "เลื่อนเงินเดือน (ดีเด่น)",
+        status: false,
+      },
+      {
+        id: 3,
+        name: "เลื่อนเงินเดือน (เพิ่มเติม)",
+        status: false,
+      },
 
-    {
-      id: 4,
-      name: "ปรับเงินเดือน",
-      status: true,
-    },
+      {
+        id: 4,
+        name: "ปรับเงินเดือน",
+        status: true,
+      },
 
-    {
-      id: 5,
-      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
-      status: true,
-    },
-    {
-      id: 6,
-      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
-      status: true,
-    },
-    {
-      id: 7,
-      name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
-      status: true,
-    },
-    {
-      id: 8,
-      name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
-      status: true,
-    },
-    {
-      id: 9,
-      name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
-      status: true,
-    },
-    {
-      id: 10,
-      name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
-      status: true,
-    },
-    {
-      id: 11,
-      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
-      status: true,
-    },
-  ];
+      {
+        id: 5,
+        name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
+        status: true,
+      },
+      {
+        id: 6,
+        name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
+        status: true,
+      },
+      {
+        id: 7,
+        name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
+        status: true,
+      },
+      {
+        id: 8,
+        name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
+        status: true,
+      },
+      {
+        id: 9,
+        name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+        status: true,
+      },
+      {
+        id: 10,
+        name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+        status: true,
+      },
+      {
+        id: 11,
+        name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+        status: true,
+      },
+    ];
+    hideLoader();
+  }, 1000);
   // showLoader();
   // await http
   //   .get(config.API.commandType)
@@ -195,7 +219,23 @@ async function fetchOrderType() {
 
 /** เริ่มเมื่อโหลดหน้านี้*/
 onMounted(() => {
-  fetchOrderType();
+  const data = [
+    { id: "1", name: "คำสั่งกรมที่ 1152/32 สั่ง ณ 1 ธค.32" },
+    { id: "2", name: "ตาม พ.ร.ก. ให้ปรับอัตราเงินเดือนตามบัญชี ข." },
+    { id: "3", name: "คำสั่งกรมฯ ที่ 753/33 ลว. 14 ส.ค 33" },
+    { id: "4", name: "รับโอนคำสั่ง สนส. 243/2533 ลว. 23 ก.ค 2533" },
+    { id: "5", name: "เลื่อนเงินเดือน คำสั่ง สนส. ที่ 309/2533 ลว. 25 ก.ย.33" },
+    {
+      id: "6",
+      name: "รับเเงินเดือนตามคุณวุฒิ คส.สนส.ที่ 403/33 ลว. 29 พ.ย.2533",
+    },
+    {
+      id: "7",
+      name: "แก้ไขการเลื่อนขั้นเงินเดือน คส.สนส.ที่404/2533 ลว. 29 พ.ย. 2533",
+    },
+    { id: "8", name: "แบบรายงาน ก.ก และบันทึกที่ กท.6001/0448 ลว. 3 เม.ย34" },
+  ];
+  listOrder.value = data;
 });
 </script>
 
@@ -204,7 +244,180 @@ onMounted(() => {
     Template สำหรับลงในตำแหน่ง/เงินเดือน
   </div>
   <div class="row q-col-gutter-sm">
-    <div class="col-12"></div>
+    <div class="col-4">
+      <q-card bordered style="height: 100%">
+        <div class="text-body1 q-pa-sm text-weight-medium">
+          Template และ คำสั่ง
+        </div>
+        <q-separator />
+        <q-card-section class="q-pa-sm">
+          <q-scroll-area style="height: 70vh" class="scrollStyle">
+            <q-list
+              v-for="(item, index) in listOrder"
+              :key="item.id"
+              class="q-pr-sm"
+            >
+              <q-item
+                clickable
+                v-ripple
+                :active="activeOrderId === item.id"
+                active-class="my-menu_link"
+                @click="selectInbox(item)"
+              >
+                <q-item-section>
+                  <q-item-label>
+                    {{ item.name }}
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-separator v-if="listOrder.length !== index + 1" />
+            </q-list>
+          </q-scroll-area>
+        </q-card-section>
+      </q-card>
+    </div>
+    <div class="col-8">
+      <q-card bordered style="height: 100%">
+        <div v-if="activeOrderId !== ''">
+          <div class="row q-pa-sm q-col-gutter-sm">
+            <div class="col-12">
+              <div class="row q-gutter-sm">
+                <q-btn
+                  flat
+                  dense
+                  round
+                  icon="add"
+                  color="add"
+                  @click="onDialogAdd"
+                  ><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" v-if="filter == ''" />
+                    <q-icon
+                      name="clear"
+                      v-else
+                      class="cursor-pointer"
+                      @click="filter = ''"
+                    />
+                  </template>
+                </q-input>
+                <q-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
+                />
+              </div>
+            </div>
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                :filter="filter"
+                row-key="id"
+                flat
+                bordered
+                :paging="true"
+                dense
+                :visible-columns="visibleColumns"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width></q-th>
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                      style="color: #000000; font-weight: 500"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td auto-width>
+                      <q-btn
+                        flat
+                        dense
+                        round
+                        icon="edit"
+                        color="edit"
+                        @click="onDialogEdit(props.row)"
+                        ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                      </q-btn>
+                      <q-btn
+                        flat
+                        dense
+                        round
+                        icon="mdi-delete"
+                        color="red"
+                        @click="onDelete(props.row.id)"
+                        ><q-tooltip>ลบข้อมูล</q-tooltip>
+                      </q-btn>
+                    </q-td>
+                    <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 == 'status'">
+                        <q-icon
+                          :color="props.row.status ? 'green' : 'orange'"
+                          :name="
+                            props.row.status
+                              ? 'mdi-check-circle'
+                              : 'mdi-minus-circle'
+                          "
+                        />
+                      </div>
+                      <div v-else>
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </div>
+        <div v-else style="height: auto; max-width: 100%; max-height: 90vh">
+          <div
+            class="absolute-center text-center text-grey-9"
+            style="width: 100%"
+          >
+            <div class="column items-center">
+              <q-icon
+                name="mdi-hand-pointing-left"
+                size="lg"
+                color="primary"
+              ></q-icon>
+              <span>กรุณาเลือกรายการคำสั่ง</span>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
   </div>
 
   <q-dialog v-model="dialogForm" persistent>