From d88964a57bea5ca7f80b564fe89c46030f096406 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 31 Mar 2025 12:07:02 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=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/=E0=B8=84=E0=B9=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../13_salary/components/DialogInfoMain.vue   |  11 +-
 .../13_salary/components/InfoSalary.vue       | 352 +++++++++++++++---
 2 files changed, 304 insertions(+), 59 deletions(-)

diff --git a/src/modules/13_salary/components/DialogInfoMain.vue b/src/modules/13_salary/components/DialogInfoMain.vue
index 5e1b35128..b9608ed92 100644
--- a/src/modules/13_salary/components/DialogInfoMain.vue
+++ b/src/modules/13_salary/components/DialogInfoMain.vue
@@ -90,6 +90,9 @@ function redirecToRegistry() {
   modal.value = false;
 }
 
+const thumbStyle = ref<any>({
+  zIndex: "1",
+});
 watch(
   () => modal.value,
   async () => {
@@ -184,7 +187,10 @@ watch(
                 </div>
               </q-card-section>
 
-              <q-scroll-area style="height: 55vh; max-width: 100%">
+              <q-scroll-area
+                :thumb-style="thumbStyle"
+                style="height: 55vh; max-width: 100%"
+              >
                 <InfoSalary
                   v-if="type === 'posSalary'"
                   v-model:profileId="profileId"
@@ -222,4 +228,5 @@ watch(
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+</style>
diff --git a/src/modules/13_salary/components/InfoSalary.vue b/src/modules/13_salary/components/InfoSalary.vue
index e85e71412..8ee49a92f 100644
--- a/src/modules/13_salary/components/InfoSalary.vue
+++ b/src/modules/13_salary/components/InfoSalary.vue
@@ -3,21 +3,31 @@ import { ref, onMounted, computed } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
+import type { QTableColumn } from "quasar";
 
 /**
  * importType
  */
 import type { QTableProps } from "quasar";
 import type { DataPosSalary } from "@/modules/13_salary/interface/response/Main";
+import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
 
 /**
  * importStore
  */
 import { useCounterMixin } from "@/stores/mixin";
+import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
 
 const $q = useQuasar();
-const { date2Thai, showLoader, hideLoader, messageError, onSearchDataTable } =
-  useCounterMixin();
+const {
+  date2Thai,
+  showLoader,
+  hideLoader,
+  messageError,
+  onSearchDataTable,
+  findOrgName,
+  findOrgNameHtml,
+} = useCounterMixin();
 
 /**
  *  props
@@ -29,19 +39,182 @@ const employeeClass = defineModel<string>("employeeClass", { required: true });
 /**
  * Table
  */
+const modalCommand = ref<boolean>(false);
+const command = ref<string>("");
+const commandId = ref<string>("");
+
 const keyword = ref<string>("");
 const rows = ref<DataPosSalary[]>([]);
 const rowsData = ref<DataPosSalary[]>([]);
-const baseColumns = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableColumn[]>([
   {
-    name: "date",
+    name: "commandDateAffect",
     align: "left",
-    label: "วัน เดือน ปี",
+    label: "วันที่คำสั่งมีผล",
     sortable: true,
-    field: "date",
+    field: "commandDateAffect",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandDateSign",
+    align: "left",
+    label: "วันที่ลงนาม",
+    sortable: true,
+    field: "commandDateSign",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNumCodeSit",
+    align: "left",
+    label: "หน่วยงานที่ออกคำสั่ง",
+    sortable: false,
+    field: "posNumCodeSit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posNumCodeSitAbb && row.posNumCodeSit
+        ? `${row.posNumCodeSit} (${row.posNumCodeSitAbb})`
+        : row.posNumCodeSit
+        ? row.posNumCodeSit
+        : "-";
+    },
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label:
+      employeeClass.value === "-employee" ? "ตำแหน่งเลขที่" : "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posNoAbb && row.posNo
+        ? `${row.posNoAbb}${row.posNo}`
+        : row.posNo
+        ? row.posNo
+        : "-";
+    },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: employeeClass.value === "-employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: employeeClass.value === "-employee" ? "กลุ่มงาน" : "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: employeeClass.value === "-employee" ? "ระดับชั้นงาน" : "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    format(val, row) {
+      return `${
+        row.positionLevel
+          ? row.positionLevel
+          : row.positionCee
+          ? row.positionCee
+          : "-"
+      }`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "commandNo",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+        : "";
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandCode",
+    align: "left",
+    label: "ประเภทคำสั่ง",
+    sortable: true,
+    field: "commandCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px;min-width:280px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName({
+        root: row.orgRoot,
+        child1: row.orgChild1,
+        child2: row.orgChild2,
+        child3: row.orgChild3,
+        child4: row.orgChild4,
+      });
+    },
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "amount",
@@ -51,17 +224,19 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-  },
-  {
-    name: "positionSalaryAmount",
-    align: "left",
-    label: "เงินประจำตำแหน่ง",
-    sortable: true,
-    field: "positionSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
+    format(v, row) {
+      return row.amount
+        ? `${row.amount.toLocaleString()}${
+            row.amountSpecial !== 0 && row.amountSpecial
+              ? ` (${row.amountSpecial.toLocaleString()})`
+              : ""
+          }`
+        : "-";
+    },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "mouthSalaryAmount",
@@ -72,58 +247,68 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 
   {
-    name: "posNo",
+    name: "remark",
     align: "left",
-    label:
-      employeeClass.value === "-employee" ? "ตำแหน่งเลขที่" : "เลขที่ตำแหน่ง",
+    label: "หมายเหตุ",
     sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "positionType",
-    align: "left",
-    label: employeeClass.value === "-employee" ? "กลุ่มงาน" : "ตำแหน่งประเภท",
-    sortable: true,
-    field: "positionType",
+    field: "remark",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionLevel",
+    name: "lastUpdateFullName",
     align: "left",
-    label: employeeClass.value === "-employee" ? "ระดับชั้นงาน" : "ระดับ",
+    label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "templateDoc",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "templateDoc",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "refCommandNo",
+    name: "lastUpdatedAt",
     align: "left",
-    label: "เลขที่คำสั่ง",
+    label: "วันที่แก้ไข",
     sortable: true,
-    field: "refCommandNo",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const columns = computed(() => {
+const columns = computed<QTableColumn[]>(() => {
   if (employeeClass.value === "-employee") {
     if (baseColumns.value) {
       return baseColumns.value.filter(
@@ -133,18 +318,29 @@ const columns = computed(() => {
       );
     }
   }
-  return baseColumns.value;
+  return baseColumns.value.filter(
+    (e: QTableColumn) =>
+      e.name !== "lastUpdateFullName" && e.name !== "lastUpdatedAd"
+  );
 });
 const visibleColumns = ref<string[]>([
-  "date",
+  "commandDateAffect",
+  "posNumCodeSit",
+  "posNo",
+  "positionName",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
   "amount",
   "positionSalaryAmount",
   "mouthSalaryAmount",
-  "posNo",
-  "positionType",
-  "positionLevel",
-  "templateDoc",
-  "refCommandNo",
+  "commandNo",
+  "commandCode",
+  "commandDateSign",
+  "organization",
+  "remark",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 
 /**
@@ -174,6 +370,12 @@ function onSearch() {
   );
 }
 
+function onRefCommand(data: ResListSalary) {
+  modalCommand.value = true;
+  command.value = data.refCommandNo;
+  commandId.value = data.commandId;
+}
+
 onMounted(() => {
   fetchListSalary();
 });
@@ -232,8 +434,38 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props">
-            <q-td v-for="col in props.cols" :key="col.id">
-              <div class="table_ellipsis">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.id"
+              :class="props.row.isEntry ? 'text-red' : ''"
+            >
+              <div
+                v-if="col.name == 'commandNo' && props.row.commandId"
+                @click="col.value ? onRefCommand(props.row) : null"
+                :class="
+                  col.value
+                    ? 'table_ellipsis text-blue cursor-pointer'
+                    : 'table_ellipsis'
+                "
+              >
+                {{ col.value ? col.value : "-" }}
+                <q-tooltip v-if="col.value">ดูคำสั่ง</q-tooltip>
+              </div>
+
+              <div v-else-if="col.name == 'organization'" class="text-html">
+                {{
+                  props.row
+                    ? findOrgNameHtml({
+                        root: props.row.orgRoot,
+                        child1: props.row.orgChild1,
+                        child2: props.row.orgChild2,
+                        child3: props.row.orgChild3,
+                        child4: props.row.orgChild4,
+                      })
+                    : "-"
+                }}
+              </div>
+              <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
@@ -242,6 +474,12 @@ onMounted(() => {
       </d-table>
     </div>
   </q-card-section>
+
+  <DialogPreviewCommand
+    v-model:modal="modalCommand"
+    v-model:command="command"
+    v-model:commandId="commandId"
+  />
 </template>
 
 <style scoped></style>