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] 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 {