From d21528316300caef8b68c4555ac24ffc03c73a06 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 15 Dec 2025 11:50:33 +0700
Subject: [PATCH 1/4] fix(command): edit-salary

---
 src/api/18_command/api.command.ts             |   2 +
 .../components/PersonalList/DialogOrders.vue  |   4 +-
 .../components/PersonalList/Table.vue         |   1 -
 .../components/DialogCreateCommand.vue        |  55 +-
 .../components/DialogEditSalary.vue           | 484 ++++++++++++++++++
 .../18_command/interface/index/Main.ts        |   1 +
 6 files changed, 534 insertions(+), 13 deletions(-)
 create mode 100644 src/modules/18_command/components/DialogEditSalary.vue

diff --git a/src/api/18_command/api.command.ts b/src/api/18_command/api.command.ts
index 9bf159f39..d986ff9b2 100644
--- a/src/api/18_command/api.command.ts
+++ b/src/api/18_command/api.command.ts
@@ -25,4 +25,6 @@ export default {
 
   //Digital Signature
   commandDirector: `${env.API_URI}/org/profile/commander-director`,
+
+  commandEditSalary: `${command}/tab2/edit-salary`,
 };
diff --git a/src/modules/05_placement/components/PersonalList/DialogOrders.vue b/src/modules/05_placement/components/PersonalList/DialogOrders.vue
index 253a7cf7f..8ac613a5f 100644
--- a/src/modules/05_placement/components/PersonalList/DialogOrders.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogOrders.vue
@@ -346,7 +346,7 @@ watch(
                   keep-color
                   color="primary"
                   dense
-                  :disable="commandType"
+                  :disable="commandType ? false : true"
                   v-model="scope.selected"
                 />
               </template>
@@ -357,7 +357,7 @@ watch(
                       keep-color
                       color="primary"
                       dense
-                      :disable="commandType"
+                      :disable="commandType ? false : true"
                       v-model="props.selected"
                     />
                   </q-td>
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 07dfad06d..b7fd87dd2 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -774,7 +774,6 @@ function onSubmitDate() {
  */
 function openModalOrder(val: boolean) {
   // ยังไม่ได้ดัก ส่ง ไป ทั้ง object #e.draft == "รอส่งตัว" &&
-  console.log(rowsOrder.value);
 
   rowsOrder.value = rows.value.filter(
     (e: any) =>
diff --git a/src/modules/18_command/components/DialogCreateCommand.vue b/src/modules/18_command/components/DialogCreateCommand.vue
index d29ce53f6..c2928197c 100644
--- a/src/modules/18_command/components/DialogCreateCommand.vue
+++ b/src/modules/18_command/components/DialogCreateCommand.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed, type PropType } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -19,6 +19,7 @@ import type {
 import type { DataListCommand } from "@/modules/18_command/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogEditSalary from "@/modules/18_command/components/DialogEditSalary.vue";
 
 const storeCommand = useCommandMainStore();
 const router = useRouter();
@@ -43,6 +44,10 @@ const props = defineProps({
   },
 });
 
+const isSalary = computed(() => {
+  return !!commandOp.value.find((v) => v.id == commandType.value)?.isSalary;
+});
+
 const commandOp = ref<ListCommand[]>([]); // ประเภทคำสั่ง
 const commandType = ref<string>(""); //ประเภทคำสั่ง
 const commandNo = ref<string>(""); //คำสั่งเลขที่
@@ -130,6 +135,9 @@ const columns = ref<QTableProps["columns"]>([
 
 const selectCreate = ref<string | null>("NEW"); //ประเภทการออกคำสั่ง สร้างใหม่/คำสั่งแบบร่าง
 
+const modalSalary = ref<boolean>(false); //
+const commandOrderId = ref<string>(""); // ไอดีคำสั่งที่สร้างหรือเพิ่มคนเข้าไป
+
 /** ฟังก์ชันเรียกข้อมูลรายการคำสั่ง*/
 async function getListCommandDraf() {
   showLoader();
@@ -191,12 +199,18 @@ function createCommand(isRedirect: boolean) {
       .post(config.API.command + `/person`, body)
       .then(async (res) => {
         const id = await res.data.result;
+        commandOrderId.value = id;
         modal.value = false;
-        if (isRedirect) {
-          router.push(`/command/edit/${id}`);
+        if (!isSalary.value) {
+          if (isRedirect) {
+            router.push(`/command/edit/${id}`);
+          } else {
+            clearValue();
+            props.fetchData(); // เรียกฟังก์ชัน fetchData ที่ส่งมาจาก props เพื่อรีเฟรชข้อมูล
+          }
         } else {
-          clearValue();
-          await props.fetchData(); // เรียกฟังก์ชัน fetchData ที่ส่งมาจาก props เพื่อรีเฟรชข้อมูล
+          modal.value = false;
+          modalSalary.value = true;
         }
       })
       .catch((e) => {
@@ -237,12 +251,18 @@ function addPersonalToCommand(isRedirect: boolean) {
       .post(config.API.command + `/person`, body)
       .then(async (res) => {
         const id = await res.data.result;
+        commandOrderId.value = id;
         modal.value = false;
-        if (isRedirect) {
-          router.push(`/command/edit/${id}`);
+        if (!isSalary.value) {
+          if (isRedirect) {
+            router.push(`/command/edit/${id}`);
+          } else {
+            modal.value = false;
+            props.fetchData(); // เรียกฟังก์ชัน fetchData ที่ส่งมาจาก props เพื่อรีเฟรชข้อมูล
+          }
         } else {
           modal.value = false;
-          await props.fetchData(); // เรียกฟังก์ชัน fetchData ที่ส่งมาจาก props เพื่อรีเฟรชข้อมูล
+          modalSalary.value = true;
         }
       })
       .catch((e) => {
@@ -569,7 +589,7 @@ watch(
 
       <q-card-actions align="right">
         <q-btn
-          v-if="isHold"
+          v-if="isHold && !isSalary"
           label="บันทึกและเลือกรายชื่อต่อ"
           @click="() => onSubmit(false)"
           :disable="
@@ -580,7 +600,9 @@ watch(
           <q-tooltip>บันทึกและเลือกรายชื่อต่อ</q-tooltip>
         </q-btn>
         <q-btn
-          label="บันทึกและไปยังหน้าคำสั่ง"
+          :label="
+            !isSalary ? 'บันทึกและไปยังหน้าคำสั่ง' : 'บันทึกและไปยังหน้าแก้ไขเงินเดือน'
+          "
           @click="() => onSubmit(true)"
           :disable="
             selectCreate == 'NEW' ? commandType == '' : selected.length == 0
@@ -592,6 +614,19 @@ watch(
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <DialogEditSalary
+    v-model:modal="modalSalary"
+    :command-code="commandTypeCode || ''"
+    :command-id="
+      selectCreate === 'NEW'
+        ? commandOrderId
+        : selected.length > 0
+        ? selected[0].id
+        : ''
+    "
+    :fetch-data="fetchData"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/18_command/components/DialogEditSalary.vue b/src/modules/18_command/components/DialogEditSalary.vue
new file mode 100644
index 000000000..916451611
--- /dev/null
+++ b/src/modules/18_command/components/DialogEditSalary.vue
@@ -0,0 +1,484 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const router = useRouter();
+
+const {
+  dialogConfirm,
+
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  onSearchDataTable,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", {
+  type: Boolean,
+  required: true,
+});
+
+const props = defineProps({
+  commandCode: {
+    type: String,
+    required: true,
+  },
+  commandId: {
+    type: String,
+    required: true,
+  },
+  fetchData: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const baseColumns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: (row) => rows.value.indexOf(row) + 1,
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "รักษาการ (เลขที่ตำแหน่ง)",
+    field: "posNo",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "citizenId",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix ?? ""}${row.firstName ?? ""} ${row.lastName ?? ""}`;
+    },
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    field: "positionType",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posType
+        ? `${row.posType} ${row.posLevel ? `(${row.posLevel})` : ""}`
+        : "-";
+    },
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    field: "amount",
+    format(val) {
+      return val ? val.toLocaleString() : "-";
+    },
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "amountSpecial",
+    align: "left",
+    label: "เงินค่าตอบแทนพิเศษ",
+    field: "amountSpecial",
+    format(val) {
+      return val ? val.toLocaleString() : "-";
+    },
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    field: "positionSalaryAmount",
+    format(val) {
+      return val ? val.toLocaleString() : "-";
+    },
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    field: "mouthSalaryAmount",
+    format(val) {
+      return val ? val.toLocaleString() : "-";
+    },
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remarkHorizontal",
+    align: "left",
+    label: "หมายเหตุแนวนอน",
+    field: "remarkHorizontal",
+    format(val) {
+      return val ? val.toLocaleString() : "-";
+    },
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remarkVertical",
+    align: "left",
+    label: "หมายเหตุแนวตั้ง",
+    field: "remarkVertical",
+    format(val) {
+      return val ? val.toLocaleString() : "-";
+    },
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const columns = computed<QTableProps["columns"]>(() => {
+  if (
+    props.commandCode === "C-PM-01" ||
+    props.commandCode === "C-PM-02" ||
+    props.commandCode === "C-PM-03" ||
+    props.commandCode === "C-PM-04"
+  ) {
+    return baseColumns.value;
+  } else if (props.commandCode == "C-PM-40") {
+    return baseColumns.value?.filter(
+      (e) => e.name !== "position" && e.name !== "positionType"
+    );
+  } else {
+    return baseColumns.value?.filter(
+      (e) =>
+        e.name !== "position" && e.name !== "positionType" && e.name !== "posNo"
+    );
+  }
+});
+const visibleColumns = ref<String[]>([
+  "no",
+  "posNo",
+  "citizenId",
+  "fullName",
+  "amount",
+  "position",
+  "positionType",
+  "amountSpecial",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "remarkHorizontal",
+  "remarkVertical",
+]);
+
+const filter = ref<string>("");
+const rowsMain = ref<Array<any>>([]);
+const rows = ref<Array<any>>([]);
+const isNext = ref<boolean>(false);
+
+// Functions for number formatting
+function formatNumber(value: any): string {
+  if (!value || isNaN(value)) return "";
+  return Number(value).toLocaleString();
+}
+
+function unformatNumber(value: string): number | null {
+  if (!value) return null;
+  const numStr = value.replace(/,/g, "");
+  const num = parseFloat(numStr);
+  return isNaN(num) ? null : num;
+}
+
+function onSearchData() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function closeModal() {
+  modal.value = false;
+  rows.value = [];
+  rowsMain.value = [];
+  filter.value = "";
+}
+
+/** ดึงข้อมูล บุคคล */
+async function getPersonList() {
+  await http
+    .get(config.API.commandAction(props.commandId, "tab2"))
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data.commandRecives;
+      rowsMain.value = data.commandRecives;
+
+      onSearchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    try {
+      const payload = rows.value.map((item) => ({
+        id: item.id,
+        mouthSalaryAmount: Number(item.mouthSalaryAmount) || null,
+        positionSalaryAmount: Number(item.positionSalaryAmount) || null,
+        amount: Number(item.amount) || null,
+        amountSpecial: Number(item.amountSpecial) || null,
+        remarkVertical: item.remarkVertical,
+        remarkHorizontal: item.remarkHorizontal,
+      }));
+
+      await http.post(config.API.commandEditSalary, payload);
+      success($q, "บันทึกข้อมูลาสำเร็จ");
+      if (isNext.value) {
+        router.push(`/command/edit/${props.commandId}`);
+      } else {
+        closeModal();
+        props.fetchData(); // เรียกฟังก์ชัน fetchData ที่ส่งมาจาก props เพื่อรีเฟรชข้อมูล
+      }
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+watch(
+  () => modal.value,
+  (newVal) => {
+    if (newVal) {
+      getPersonList();
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <DialogHeader :tittle="'แก้ไขเงินเดือน'" :close="closeModal" />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 row q-pb-sm items-center">
+              <q-space />
+
+              <div class="items-center" style="display: flex">
+                <!-- ค้นหาข้อความใน table -->
+                <q-input
+                  standout
+                  dense
+                  v-model="filter"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหา"
+                  @keydown.enter.prevent="onSearchData()"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+                <!-- แสดงคอลัมน์ใน table -->
+                <q-select
+                  v-model="visibleColumns"
+                  :display-value="$q.lang.table.columns"
+                  multiple
+                  outlined
+                  dense
+                  :options="columns"
+                  options-dense
+                  option-value="name"
+                  map-options
+                  emit-value
+                  style="min-width: 140px"
+                  class="gt-xs q-ml-sm"
+                />
+              </div>
+            </div>
+            <div class="col-12">
+              <d-table
+                :rows="rows"
+                :columns="columns"
+                :visible-columns="visibleColumns"
+                row-key="name"
+              >
+                <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-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props">
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'amount'">
+                        <q-input
+                          :model-value="formatNumber(props.row.amount)"
+                          @update:model-value="(val:string) => props.row.amount = unformatNumber(val)"
+                          type="number"
+                          dense
+                          borderless
+                          outlined
+                          :rules="[(val:string) => !!unformatNumber(val) || 'กรุณากรอกเงินเดือน']"
+                          hide-bottom-space
+                        />
+                      </div>
+                      <div v-else-if="col.name == 'amountSpecial'">
+                        <q-input
+                          :model-value="formatNumber(props.row.amountSpecial)"
+                          @update:model-value="(val:string) => props.row.amountSpecial = unformatNumber(val)"
+                          type="text"
+                          dense
+                          borderless
+                          outlined
+                        />
+                        <!-- :rules="[(val:string) => !!val || 'กรุณากรอกเงินค่าตอบแทนพิเศษ']" -->
+                      </div>
+                      <div v-else-if="col.name == 'positionSalaryAmount'">
+                        <q-input
+                          :model-value="
+                            formatNumber(props.row.positionSalaryAmount)
+                          "
+                          @update:model-value="(val:string) => props.row.positionSalaryAmount = unformatNumber(val)"
+                          type="text"
+                          dense
+                          borderless
+                          outlined
+                        />
+                        <!-- :rules="[(val:string) => !!val || 'กรุณากรอกเงินประจำตำแหน่ง']" -->
+                      </div>
+                      <div v-else-if="col.name == 'mouthSalaryAmount'">
+                        <q-input
+                          :model-value="
+                            formatNumber(props.row.mouthSalaryAmount)
+                          "
+                          @update:model-value="
+                            (val:string) =>
+                              (props.row.mouthSalaryAmount =
+                                unformatNumber(val))
+                          "
+                          type="text"
+                          dense
+                          borderless
+                          outlined
+                        />
+                        <!-- :rules="[(val:string) => !!val || 'กรุณากรอกเงินค่าตอบแทนรายเดือน']" -->
+                      </div>
+                      <div v-else-if="col.name == 'remarkHorizontal'">
+                        <q-input
+                          v-model="props.row.remarkHorizontal"
+                          type="textarea"
+                          autorows
+                          dense
+                          borderless
+                          outlined
+                          rows="1"
+                        />
+                      </div>
+                      <div v-else-if="col.name == 'remarkVertical'">
+                        <q-input
+                          v-model="props.row.remarkVertical"
+                          type="textarea"
+                          autorows
+                          dense
+                          borderless
+                          outlined
+                          rows="1"
+                        />
+                      </div>
+                      <div v-else>
+                        {{ col.value ?? "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            label="บันทึกและเลือกรายชื่อต่อ"
+            color="blue"
+            @click="() => (isNext = false)"
+            type="submit"
+          >
+            <q-tooltip>บันทึกและเลือกรายชื่อต่อ</q-tooltip>
+          </q-btn>
+          <q-btn
+            label="บันทึกและไปยังหน้าคำสั่ง"
+            @click="() => (isNext = true)"
+            color="public"
+            type="submit"
+          >
+            <q-tooltip>บันทึกและไปยังหน้าคำสั่ง</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/18_command/interface/index/Main.ts b/src/modules/18_command/interface/index/Main.ts
index 98e1b78a7..1ee537587 100644
--- a/src/modules/18_command/interface/index/Main.ts
+++ b/src/modules/18_command/interface/index/Main.ts
@@ -60,6 +60,7 @@ interface ListCommand {
   name: string;
   subtitle?: string;
   commandSysId: string;
+  isSalary?: boolean;
 }
 
 interface DataOrder {

From 512f9840de8b1ce69e4534116c779ea59f96d271 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 15 Dec 2025 13:21:08 +0700
Subject: [PATCH 2/4] fix currency

---
 src/components/CurruncyInput.vue              |  2 +-
 .../components/DialogEditSalary.vue           | 80 ++++++++++++-------
 .../components/Step/Dialog2_Salary.vue        | 47 ++++++++---
 3 files changed, 86 insertions(+), 43 deletions(-)

diff --git a/src/components/CurruncyInput.vue b/src/components/CurruncyInput.vue
index 9386d093e..e2b2f3ae0 100644
--- a/src/components/CurruncyInput.vue
+++ b/src/components/CurruncyInput.vue
@@ -44,7 +44,7 @@ const { inputRef, formattedValue, setValue } = useCurrencyInput({
   currency: "THB",
   currencyDisplay: "hidden" as any,
   hideCurrencySymbolOnFocus: true,
-  hideGroupingSeparatorOnFocus: true,
+  hideGroupingSeparatorOnFocus: false,
   hideNegligibleDecimalDigitsOnFocus: true,
   autoDecimalDigits: false,
   useGrouping: true,
diff --git a/src/modules/18_command/components/DialogEditSalary.vue b/src/modules/18_command/components/DialogEditSalary.vue
index 916451611..7c2a2b256 100644
--- a/src/modules/18_command/components/DialogEditSalary.vue
+++ b/src/modules/18_command/components/DialogEditSalary.vue
@@ -8,6 +8,7 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -372,55 +373,74 @@ watch(
                       :props="props"
                     >
                       <div v-if="col.name == 'amount'">
-                        <q-input
-                          :model-value="formatNumber(props.row.amount)"
-                          @update:model-value="(val:string) => props.row.amount = unformatNumber(val)"
-                          type="number"
+                        <CurruncyInput
+                          v-model="props.row.amount"
+                          :edit="true"
                           dense
-                          borderless
                           outlined
-                          :rules="[(val:string) => !!unformatNumber(val) || 'กรุณากรอกเงินเดือน']"
                           hide-bottom-space
+                          lazy-rules
+                          :rules="[
+                            (val:any) => !!val || 'กรุณากรอกเงินเดือน',
+                            (val:any) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินเดือนต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
                         />
                       </div>
                       <div v-else-if="col.name == 'amountSpecial'">
-                        <q-input
-                          :model-value="formatNumber(props.row.amountSpecial)"
-                          @update:model-value="(val:string) => props.row.amountSpecial = unformatNumber(val)"
-                          type="text"
+                        <CurruncyInput
+                          v-model="props.row.amountSpecial"
+                          :edit="true"
                           dense
-                          borderless
                           outlined
+                          hide-bottom-space
+                          lazy-rules
+                          :rules="[
+                            (val:any) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินค่าตอบแทนพิเศษต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
                         />
                         <!-- :rules="[(val:string) => !!val || 'กรุณากรอกเงินค่าตอบแทนพิเศษ']" -->
                       </div>
                       <div v-else-if="col.name == 'positionSalaryAmount'">
-                        <q-input
-                          :model-value="
-                            formatNumber(props.row.positionSalaryAmount)
-                          "
-                          @update:model-value="(val:string) => props.row.positionSalaryAmount = unformatNumber(val)"
-                          type="text"
+                        <CurruncyInput
+                          v-model="props.row.positionSalaryAmount"
+                          :edit="true"
                           dense
-                          borderless
                           outlined
+                          hide-bottom-space
+                          lazy-rules
+                          :rules="[
+                            (val:any) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินประจำตำแหน่งต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
                         />
                         <!-- :rules="[(val:string) => !!val || 'กรุณากรอกเงินประจำตำแหน่ง']" -->
                       </div>
                       <div v-else-if="col.name == 'mouthSalaryAmount'">
-                        <q-input
-                          :model-value="
-                            formatNumber(props.row.mouthSalaryAmount)
-                          "
-                          @update:model-value="
-                            (val:string) =>
-                              (props.row.mouthSalaryAmount =
-                                unformatNumber(val))
-                          "
-                          type="text"
+                        <CurruncyInput
+                          v-model="props.row.mouthSalaryAmount"
+                          :edit="true"
                           dense
-                          borderless
                           outlined
+                          hide-bottom-space
+                          lazy-rules
+                          :rules="[
+                            (val:any) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินค่าตอบแทนรายเดือนต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
                         />
                         <!-- :rules="[(val:string) => !!val || 'กรุณากรอกเงินค่าตอบแทนรายเดือน']" -->
                       </div>
@@ -429,6 +449,7 @@ watch(
                           v-model="props.row.remarkHorizontal"
                           type="textarea"
                           autorows
+                          hide-bottom-space
                           dense
                           borderless
                           outlined
@@ -440,6 +461,7 @@ watch(
                           v-model="props.row.remarkVertical"
                           type="textarea"
                           autorows
+                          hide-bottom-space
                           dense
                           borderless
                           outlined
diff --git a/src/modules/18_command/components/Step/Dialog2_Salary.vue b/src/modules/18_command/components/Step/Dialog2_Salary.vue
index 77a3efceb..68995a783 100644
--- a/src/modules/18_command/components/Step/Dialog2_Salary.vue
+++ b/src/modules/18_command/components/Step/Dialog2_Salary.vue
@@ -8,6 +8,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import DialogHeader from "@/components/DialogHeader.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const $q = useQuasar();
 const { showLoader, hideLoader, dialogConfirm, messageError, success } =
@@ -140,25 +141,30 @@ watch(
                 v-if="store.isShowSalary(type)"
                 class="col-xs-6 col-sm-6 col-md-6"
               >
-                <q-input
+                <CurruncyInput
                   dense
                   outlined
                   lazy-rules
                   hide-bottom-space
                   v-model="formData.amount"
                   :class="getClass(storeDetail.isSalary)"
-                  mask="###,###,###,###,###,###"
-                  reverse-fill-mask
                   :readonly="!storeDetail.isSalary"
                   :label="`${'เงินเดือน'}`"
-                  :rules="[(val: any) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  :rules="[
+                    (val:any) => !!val || 'กรุณากรอกเงินเดือน',
+                    (val:any) => {
+                      if (!val) return true;
+                      const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                      return numVal <= 10000000 || 'เงินเดือนต้องไม่เกิน 10,000,000 บาท';
+                    }
+                  ]"
                 />
               </div>
               <div
                 v-if="store.isShowSalary(type)"
                 class="col-xs-6 col-sm-6 col-md-6"
               >
-                <q-input
+                <CurruncyInput
                   dense
                   outlined
                   lazy-rules
@@ -166,16 +172,21 @@ watch(
                   v-model="formData.amountSpecial"
                   :class="getClass(storeDetail.isSalary)"
                   :readonly="!storeDetail.isSalary"
-                  mask="###,###,###,###,###,###"
-                  reverse-fill-mask
                   :label="`${'เงินค่าตอบแทนพิเศษ'}`"
+                  :rules="[
+                    (val:any) => {
+                      if (!val) return true;
+                      const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                      return numVal <= 10000000 || 'เงินค่าตอบแทนพิเศษต้องไม่เกิน 10,000,000 บาท';
+                    }
+                  ]"
                 />
               </div>
               <div
                 v-if="store.isShowSalary(type)"
                 class="col-xs-6 col-sm-6 col-md-6"
               >
-                <q-input
+                <CurruncyInput
                   dense
                   outlined
                   lazy-rules
@@ -183,9 +194,14 @@ watch(
                   v-model="formData.positionSalaryAmount"
                   :class="getClass(storeDetail.isSalary)"
                   :readonly="!storeDetail.isSalary"
-                  mask="###,###,###,###,###,###"
-                  reverse-fill-mask
                   :label="`${'เงินประจำตำแหน่ง'}`"
+                  :rules="[
+                    (val:any) => {
+                      if (!val) return true;
+                      const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                      return numVal <= 10000000 || 'เงินประจำตำแหน่งต้องไม่เกิน 10,000,000 บาท';
+                    }
+                  ]"
                 />
               </div>
 
@@ -193,7 +209,7 @@ watch(
                 v-if="store.isShowSalary(type)"
                 class="col-xs-6 col-sm-6 col-md-6"
               >
-                <q-input
+                <CurruncyInput
                   dense
                   outlined
                   lazy-rules
@@ -201,9 +217,14 @@ watch(
                   v-model="formData.monthSalaryAmount"
                   :class="getClass(storeDetail.isSalary)"
                   :readonly="!storeDetail.isSalary"
-                  mask="###,###,###,###,###,###"
-                  reverse-fill-mask
                   :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                  :rules="[
+                    (val:any) => {
+                      if (!val) return true;
+                      const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                      return numVal <= 10000000 || 'เงินค่าตอบแทนรายเดือนต้องไม่เกิน 10,000,000 บาท';
+                    }
+                  ]"
                 />
               </div>
             </div>

From b0f55a92720711a3487a0b2cd3c57fd814cf4efc Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 15 Dec 2025 13:26:31 +0700
Subject: [PATCH 3/4] fix:q-input maxlength

---
 src/modules/15_development/components/ProjectDetail.vue | 2 ++
 src/modules/15_development/components/Target.vue        | 8 ++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index 4847fa233..8ed60030f 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -1015,6 +1015,7 @@ defineExpose({
                 v-model="formData.projectModalPlanned"
                 label="จำนวน (รุ่น)"
                 mask="#"
+                maxlength="5"
                 reverse-fill-mask
                 class="inputgreen"
                 @update:model-value="props.onCheckChangeData()"
@@ -1198,6 +1199,7 @@ defineExpose({
                     v-model="formData.projectModalActual"
                     label="จำนวน (รุ่น)"
                     mask="#"
+                    maxlength="5"
                     reverse-fill-mask
                     @update:model-value="props.onCheckChangeData()"
                   />
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index 73085fc29..360cd4b26 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -222,6 +222,7 @@ const columnsPlannedGoals = ref<QTableProps["columns"]>([
     align: "left",
     label: "จำนวน(คน)",
     sortable: true,
+    format: (val) => Number(val).toLocaleString("th-TH"),
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -264,9 +265,9 @@ const columnsActualGoals = ref<QTableProps["columns"]>([
     label: "จำนวน(คน)",
     sortable: true,
     field: "amount",
+    format: (val) => Number(val).toLocaleString("th-TH"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (val) => Number(val),
   },
 ]);
 
@@ -290,7 +291,7 @@ const columnsRelated = ref<QTableProps["columns"]>([
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (val) => Number(val),
+    format: (val) => Number(val).toLocaleString("th-TH"),
   },
 ]);
 
@@ -1203,6 +1204,7 @@ onMounted(() => {
                 v-model="formGroupTarget.amount"
                 label="จำนวน(คน)"
                 mask="#"
+                maxlength="5"
                 reverse-fill-mask
                 :rules="[
               (val:string) =>
@@ -1352,6 +1354,7 @@ onMounted(() => {
                 v-model="formGroupTarget.amount"
                 label="จำนวน(คน)"
                 mask="#"
+                maxlength="5"
                 reverse-fill-mask
                 :rules="[
               (val:string) =>
@@ -1546,6 +1549,7 @@ onMounted(() => {
                 v-model="formGroupRelate.amount"
                 label="จำนวน(คน)"
                 mask="#"
+                maxlength="5"
                 reverse-fill-mask
                 :rules="[
             (val:string) =>

From 792a2aa6191dad63536a6cebf1153c5dbafc09d9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 15 Dec 2025 15:18:03 +0700
Subject: [PATCH 4/4] fix: async await

---
 src/modules/18_command/components/DialogEditSalary.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/18_command/components/DialogEditSalary.vue b/src/modules/18_command/components/DialogEditSalary.vue
index 7c2a2b256..e24ad4329 100644
--- a/src/modules/18_command/components/DialogEditSalary.vue
+++ b/src/modules/18_command/components/DialogEditSalary.vue
@@ -279,13 +279,13 @@ function onSubmit() {
       }));
 
       await http.post(config.API.commandEditSalary, payload);
-      success($q, "บันทึกข้อมูลาสำเร็จ");
       if (isNext.value) {
         router.push(`/command/edit/${props.commandId}`);
       } else {
+        await props.fetchData(); // เรียกฟังก์ชัน fetchData ที่ส่งมาจาก props เพื่อรีเฟรชข้อมูล
         closeModal();
-        props.fetchData(); // เรียกฟังก์ชัน fetchData ที่ส่งมาจาก props เพื่อรีเฟรชข้อมูล
       }
+      success($q, "บันทึกข้อมูลาสำเร็จ");
     } catch (error) {
       messageError($q, error);
     } finally {