แก้ไขประวัติเงินเดือน === > Popup-Edit

src/modules/04_registryPerson/interface/index/Edit.ts

@@ -8,4 +8,23 @@ interface DataProfile {
   org: string;
 }
 
-export type { DataProfile };
+interface FormDataSalary {
+  positionLevel: string;
+  positionCee: string;
+  amount: number;
+  amountSpecial: number;
+  posNoAbb: string;
+  posNo: string;
+  orgRoot: string;
+  orgChild1: string;
+  orgChild2: string;
+  orgChild3: string;
+  orgChild4: string;
+  commandCode: string;
+  posNumCodeSit: string;
+  posNumCodeSitAbb: string;
+  commandNo: string;
+  commandYear: null | number;
+}
+
+export type { DataProfile, FormDataSalary };

src/modules/04_registryPerson/interface/response/Edit.ts

@@ -27,8 +27,8 @@ interface DataPosition {
   amount: number;
   amountSpecial: number;
   commandCode: string;
-  commandDateAffect: string;
+  commandDateAffect: Date;
-  commandDateSign: string;
+  commandDateSign: Date;
   commandId: string;
   commandName: string;
   commandNo: string;
@@ -68,6 +68,8 @@ interface DataPosition {
   remark: string;
   salaryId: string;
   status: string;
+  posNumCodeSitAbb: string;
+  posNumCodeSit: string;
 }
 
 export type { DataSalaryPos, DataPosition };

src/modules/04_registryPerson/views/edit/components/FormPosition.vue

@@ -370,7 +370,7 @@ function classInput(val: boolean) {
         lazy-rules
         borderless
         v-model="formData.positionType"
-        :label="empType === 'officer' ? 'ประเภทตำแหน่ง' : 'กลุ่มงาน'"
+        :label="empType === 'officer' ? 'ตำแหน่งประเภท' : 'กลุ่มงาน'"
         emit-value
         map-options
         option-label="name"

src/modules/04_registryPerson/views/edit/components/Table.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, reactive } from "vue";
 import { useQuasar } from "quasar";
+import * as XLSX from "xlsx";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,7 +10,13 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
 
 import type { QTableColumn } from "quasar";
+import type { FormDataSalary } from "@/modules/04_registryPerson/interface/index/Edit";
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
+import type {
+  DataPosType,
+  DataPosLevel,
+} from "@/modules/04_registryPerson/interface/response/Position";
 
 import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
 import DialogSort from "@/modules/04_registryPerson/views/edit/components/DialogSort.vue";
@@ -28,6 +35,7 @@ const {
   success,
   findOrgNameHtml,
   dialogConfirm,
+  convertDateToAPI,
 } = useCounterMixin();
 
 const empType = ref<string>(route.params.type.toString());
@@ -120,9 +128,9 @@ const baseColumns = ref<QTableColumn[]>([
     style: "font-size: 14px",
     format(v, row) {
       return row.amount
-        ? `${row.amount.toLocaleString()}${
+        ? `${Number(row.amount).toLocaleString()}${
             row.amountSpecial !== 0 && row.amountSpecial
-              ? ` (${row.amountSpecial.toLocaleString()})`
+              ? ` (${Number(row.amountSpecial).toLocaleString()})`
               : ""
           }`
         : "-";
@@ -207,7 +215,7 @@ const baseColumns = ref<QTableColumn[]>([
     format(val, row) {
       return row.commandNo && row.commandYear
         ? `${row.commandNo}/${Number(row.commandYear) + 543}`
-        : "";
+        : "-";
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -247,19 +255,19 @@ const baseColumns = ref<QTableColumn[]>([
 const visibleColumns = ref<string[]>([
   "no",
   "commandDateAffect",
-  "posNumCodeSit",
-  "posNo",
   "positionName",
   "positionType",
   "positionLevel",
   "positionExecutive",
   "amount",
-  "positionSalaryAmount",
   "mouthSalaryAmount",
-  "commandNo",
+  "positionSalaryAmount",
-  "commandCode",
-  "commandDateSign",
   "organization",
+  "posNo",
+  "posNumCodeSit",
+  "commandNo",
+  "commandDateSign",
+  "commandCode",
   "remark",
 ]);
 const columns = computed<QTableColumn[]>(() => {
@@ -403,8 +411,350 @@ function classColorRow(isDelete: boolean, isEdit: boolean, isEntry: boolean) {
     : "";
 }
 
-onMounted(() => {
+/** ฟังก์ชันดาวน์โหลดไฟล Excel */
-  fetchData();
+function exportToExcel() {
+  const newData = rows.value.map((e: DataPosition) => {
+    return {
+      commandDateAffect: date2Thai(e.commandDateAffect),
+      positionName: e.positionName,
+      positionType: e.positionType,
+      positionLevel: e.positionLevel
+        ? e.positionLevel
+        : e.positionCee
+        ? e.positionCee
+        : "",
+      positionExecutive: e.positionExecutive,
+      amount: e.amount,
+      mouthSalaryAmount: e.mouthSalaryAmount,
+      positionSalaryAmount: e.positionSalaryAmount,
+      organization: findOrgName({
+        root: e.orgRoot,
+        child1: e.orgChild1,
+        child2: e.orgChild2,
+        child3: e.orgChild3,
+        child4: e.orgChild4,
+      }),
+      posNo:
+        e.posNoAbb && e.posNo
+          ? `${e.posNoAbb} ${e.posNo}`
+          : e.posNo
+          ? e.posNo
+          : "",
+      posNumCodeSit:
+        e.posNumCodeSitAbb && e.posNumCodeSit
+          ? `${e.posNumCodeSit} (${e.posNumCodeSitAbb})`
+          : e.posNumCodeSit
+          ? e.posNumCodeSit
+          : "",
+      commandNo:
+        e.posNumCodeSitAbb && e.posNumCodeSit
+          ? `${e.posNumCodeSit} (${e.posNumCodeSitAbb})`
+          : e.posNumCodeSit
+          ? e.posNumCodeSit
+          : "",
+      commandDateSign: date2Thai(e.commandDateSign),
+      commandCode: store.convertCommandCodeName(e.commandCode),
+      remark: e.remark,
+    };
+  });
+
+  const headers = columns.value.map((item: any) => item.label) || []; // หัวคอลัมน์ภาษาไทย
+  const worksheet = XLSX.utils.json_to_sheet(newData, {
+    header: visibleColumns.value,
+  });
+
+  //แทรกหัวคอลัมน์ภาษาไทย (ใช้ A1, B1, C1 แทน)
+  XLSX.utils.sheet_add_aoa(worksheet, [headers], { origin: "A1" });
+
+  // Create a new workbook and append the worksheet
+  const workbook = XLSX.utils.book_new();
+
+  XLSX.utils.book_append_sheet(
+    workbook,
+    worksheet,
+    `รายการประวัติตำแหน่งเงินเดือน`
+  );
+  XLSX.writeFile(workbook, "รายการประวัติตำแหน่งเงินเดือน.xlsx");
+}
+
+const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
+const posTypeOptions = ref<DataOption[]>(store.posTypeData); //รายการประเภทตำแหน่ง | กลุ่มงาน
+const posLevelOptions = ref<DataOption[]>(store.posLevelData); //รายการระดับตำแหน่ง | ระดับชั้นงาน
+const dataLevel = ref<DataPosType[]>([]); //รายการ ตำแหน่งเงินเดือน
+
+const formData = reactive<FormDataSalary>({
+  positionLevel: "",
+  positionCee: "",
+  amount: 0,
+  amountSpecial: 0,
+  posNoAbb: "",
+  posNo: "",
+  orgRoot: "",
+  orgChild1: "",
+  orgChild2: "",
+  orgChild3: "",
+  orgChild4: "",
+  commandCode: "",
+  posNumCodeSit: "",
+  posNumCodeSitAbb: "",
+  commandNo: "",
+  commandYear: null,
+});
+
+const isPositionName = ref<boolean>(false); //เช็คว่ามี ตำแหน่งประเภท
+const isUpdateData = ref<boolean>(false); // สถานะการแก้ไข
+const colNameMain = ref<string>(""); //ชื่อ Coolumn ที่ต้องการแก้ไข
+const salaryId = ref<string>(""); // id ที่ต้องการแก้ไข
+
+/**
+ * ฟังก์ชันกำหนดค่าที่ต้องการแก้ไข
+ * @param data ข้อมูลที่ต้องการแก้ไข
+ * @param colName ชื่อ Columns ที่ต้เองการแก้ไข
+ */
+function onShow(data: DataPosition, colName: string) {
+  salaryId.value = data.id;
+  isUpdateData.value = false;
+  commandCodeOptions.value = store.commandCodeData;
+  posTypeOptions.value = store.posTypeData;
+  if (colName === "positionLevel" && data.positionType) {
+    updateSelectType(data.positionType);
+  }
+  colNameMain.value = colName;
+  isPositionName.value = data.positionType ? true : false;
+  formData.positionLevel = data.positionLevel;
+  formData.positionCee = data.positionCee;
+  formData.amount = data.amount;
+  formData.amountSpecial = data.amountSpecial;
+  formData.orgRoot = data.orgRoot;
+  formData.orgChild1 = data.orgChild1;
+  formData.orgChild2 = data.orgChild2;
+  formData.orgChild3 = data.orgChild3;
+  formData.orgChild4 = data.orgChild4;
+  formData.posNoAbb = data.posNoAbb;
+  formData.posNo = data.posNo;
+  formData.commandCode = data.commandCode;
+  formData.posNumCodeSit = data.posNumCodeSit;
+  formData.posNumCodeSitAbb = data.posNumCodeSitAbb;
+  formData.commandNo = data.commandNo;
+  formData.commandYear = data.commandYear;
+}
+
+/** ฟังก์ชันกำหนดค่า FormData ทำงานเมื่อ popup editปิด*/
+function onHide() {
+  formData.positionLevel = "";
+  formData.positionCee = "";
+  formData.amount = 0;
+  formData.amountSpecial = 0;
+  formData.orgRoot = "";
+  formData.orgChild1 = "";
+  formData.orgChild2 = "";
+  formData.orgChild3 = "";
+  formData.orgChild4 = "";
+  formData.posNoAbb = "";
+  formData.posNo = "";
+  formData.commandCode = "";
+  formData.posNumCodeSit = "";
+  formData.posNumCodeSitAbb = "";
+  formData.commandNo = "";
+  formData.commandYear = null;
+}
+
+/**
+ * ฟังก์ชันบันทึกข้อมูลการแก้ไข
+ * @param val
+ * @param id
+ * @param close
+ */
+async function onSave(val: any, id: string, close?: () => void) {
+  if (isUpdateData.value) {
+    showLoader();
+    const isCol = (key: string) => colNameMain.value === key;
+    const toNumber = (v: any) =>
+      v ? Number(String(v).replace(/,/g, "")) : null;
+    const body: Record<string, any> = {};
+    if (isCol("commandDateAffect")) {
+      body.commandDateAffect = convertDateToAPI(val);
+    }
+    if (isCol("positionName")) {
+      body.positionName = val;
+    }
+    if (isCol("positionType")) {
+      body.positionType = val;
+    }
+    if (isCol("positionLevel")) {
+      body.positionLevel = formData.positionLevel;
+      body.positionCee = formData.positionCee;
+    }
+    if (isCol("positionExecutive")) {
+      body.positionExecutive = val;
+    }
+    if (isCol("amount")) {
+      body.amount = toNumber(formData.amount);
+      body.amountSpecial = toNumber(formData.amountSpecial);
+    }
+    if (isCol("positionSalaryAmount")) {
+      body.positionSalaryAmount = toNumber(val);
+    }
+    if (isCol("mouthSalaryAmount")) {
+      body.mouthSalaryAmount = toNumber(val);
+    }
+    if (isCol("organization")) {
+      body.orgRoot = formData.orgRoot;
+      body.orgChild1 = formData.orgChild1;
+      body.orgChild2 = formData.orgChild2;
+      body.orgChild3 = formData.orgChild3;
+      body.orgChild4 = formData.orgChild4;
+    }
+    if (isCol("posNo")) {
+      body.posNo = formData.posNo;
+      body.posNoAbb = formData.posNoAbb;
+    }
+    if (isCol("posNumCodeSit")) {
+      body.posNumCodeSit = formData.posNumCodeSit;
+      body.posNumCodeSitAbb = formData.posNumCodeSitAbb;
+    }
+    if (isCol("commandDateSign")) {
+      body.commandDateSign = convertDateToAPI(val);
+    }
+    if (isCol("commandNo")) {
+      body.commandNo = formData.commandNo;
+      body.commandYear = formData.commandYear;
+    }
+    if (isCol("commandCode")) {
+      body.commandCode = formData.commandCode;
+    }
+    if (isCol("remark")) {
+      body.remark = val;
+    }
+
+    await http
+      .patch(config.API.salaryTemp + `/${salaryId.value}`, body)
+      .then(async () => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+
+        rows.value = rows.value.map((item) => {
+          if (item.id === salaryId.value) {
+            return {
+              ...item,
+              ...body,
+            };
+          }
+          return item;
+        });
+
+        rowsMain.value = rowsMain.value.map((item) => {
+          if (item.id === salaryId.value) {
+            return {
+              ...item,
+              ...body,
+            };
+          }
+          return item;
+        });
+      })
+      .catch(async (err) => {
+        await fetchData?.();
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+        if (close) close();
+      });
+  } else {
+    if (close) {
+      close();
+    }
+  }
+}
+
+/**
+ * ฟิลเตอร์ข้อมูลจาก input
+ * @param val ค่าที่ป้อนให้ input
+ * @param update function จาก quasar
+ * @param filtername type ที่กำหนด ของ input นั้นๆ
+ */
+function filterSelector(val: string, update: Function, filtername: string) {
+  switch (filtername) {
+    case "commandCode":
+      update(() => {
+        commandCodeOptions.value = store.commandCodeData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "posType":
+      update(() => {
+        posTypeOptions.value = store.posTypeData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "posLevel":
+      update(() => {
+        posLevelOptions.value = store.posLevelData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
+/** ฟังก์ชันเรียกข้อมูลปรเภทตำแหน่งข้าราชการ */
+async function fetchType() {
+  const entpont =
+    empType.value === "officer"
+      ? config.API.orgPosType
+      : config.API.orgEmployeeType;
+  await http
+    .get(entpont)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+      store.posTypeData = res.data.result.map((e: DataPosType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      posTypeOptions.value = store.posTypeData;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันเลือกประเภทตำแหน่ง
+ * @param val id ประเภทตำแหน่ง
+ */
+async function updateSelectType(val: string) {
+  console.log(val);
+
+  const listLevel = val
+    ? dataLevel.value.find((e: DataPosType) => e.posTypeName === val)
+    : null;
+
+  // เช็คประเภทตำแหน่งงาน
+  if (listLevel) {
+    store.posLevelData = listLevel.posLevels.map((e: DataPosLevel) => ({
+      id: e.id,
+      name:
+        empType.value === "officer"
+          ? e.posLevelName
+          : `${listLevel.posTypeShortName} ${e.posLevelName}`,
+    }));
+  }
+}
+
+/** ฟังก์ชันอัปเดทการแก้ไข*/
+function onUpdateData() {
+  isUpdateData.value = true;
+}
+
+onMounted(async () => {
+  await Promise.all([fetchData(), fetchType()]);
 });
 </script>
 
@@ -427,6 +777,17 @@ onMounted(() => {
           <q-tooltip>จัดลำดับข้อมูล</q-tooltip></q-btn
         >
         <q-space />
+        <div>
+          <q-btn
+            flat
+            round
+            color="primary"
+            icon="download"
+            :disable="rows.length == 0"
+            @click="exportToExcel()"
+          />
+        </div>
+
         <q-input
           dense
           outlined
@@ -538,6 +899,7 @@ onMounted(() => {
                 }}</q-tooltip>
               </q-btn>
             </q-td>
+
             <q-td
               v-for="col in props.cols"
               :key="col.id"
@@ -554,6 +916,269 @@ onMounted(() => {
               <div v-if="col.name === 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
+
+              <div
+                v-else-if="
+                  col.name === 'positionLevel' ||
+                  col.name === 'amount' ||
+                  col.name === 'posNo' ||
+                  col.name === 'posNumCodeSit' ||
+                  col.name === 'commandNo' ||
+                  col.name === 'commandCode'
+                "
+              >
+                {{ col.value ?? "-" }}
+                <q-popup-edit
+                  v-if="
+                    tabs === 'PENDING' &&
+                    statusCheckEdit == 'PENDING' &&
+                    isConfirmEdit
+                  "
+                  v-model="props.row[col.name]"
+                  v-slot="scope"
+                  label-set="บันทึก"
+                  label-cancel="ยกเลิก"
+                  @before-show="onShow(props.row, col.name)"
+                  @hide="onHide"
+                  :persistent="col.name === 'commandNo'"
+                >
+                  <div class="q-mb-xs">
+                    {{ `แก้ไข${col.label}` }}
+                  </div>
+                  <div v-if="col.name === 'positionLevel'">
+                    <q-select
+                      v-if="isPositionName || props.row.positionLevel"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.positionLevel"
+                      :label="
+                        empType === 'officer' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'
+                      "
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="posLevelOptions"
+                      option-value="name"
+                      hide-bottom-space
+                      use-input
+                      hide-selected
+                      clearable
+                      fill-input
+                      input-debounce="0"
+                      @update:model-value="onUpdateData"
+                      @filter="(inputValue: string,
+                    doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
+                    )"
+                      ><template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-grey">
+                            ไม่มีข้อมูล
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+
+                    <q-input
+                      v-else
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.positionCee"
+                      hide-bottom-space
+                      @update:model-value="onUpdateData"
+                    />
+                  </div>
+
+                  <div class="q-gutter-sm" v-if="col.name === 'amount'">
+                    <q-input
+                      dense
+                      outlined
+                      v-model="formData.amount"
+                      label="เงินเดือน"
+                      mask="###,###,###,###"
+                      reverse-fill-mask
+                      lazy-rules
+                      hide-bottom-space
+                      @update:model-value="onUpdateData"
+                    />
+                    <q-input
+                      dense
+                      outlined
+                      v-model="formData.amountSpecial"
+                      label="เงินค่าตอบแทนพิเศษ"
+                      mask="###,###,###,###"
+                      reverse-fill-mask
+                      hide-bottom-space
+                      @update:model-value="onUpdateData"
+                    />
+                  </div>
+
+                  <div class="q-gutter-sm" v-else-if="col.name === 'posNo'">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.posNoAbb"
+                      hide-bottom-space
+                      :label="`${'ตัวย่อ'}`"
+                      @update:model-value="onUpdateData"
+                    />
+
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.posNo"
+                      hide-bottom-space
+                      :label="
+                        empType === 'officer'
+                          ? 'เลขที่ตำแหน่ง'
+                          : 'ตำแหน่งเลขที่'
+                      "
+                      @update:model-value="onUpdateData"
+                    >
+                    </q-input>
+                  </div>
+
+                  <div
+                    class="q-gutter-sm"
+                    v-else-if="col.name === 'posNumCodeSit'"
+                  >
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.posNumCodeSit"
+                      hide-bottom-space
+                      :label="`${'หน่วยงานที่ออกคำสั่ง'}`"
+                      @update:model-value="onUpdateData"
+                    />
+
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.posNumCodeSitAbb"
+                      hide-bottom-space
+                      :label="`${'ตัวย่อหน่วยงานที่ออกคำสั่ง'}`"
+                      @update:model-value="onUpdateData"
+                    />
+                  </div>
+
+                  <div class="q-gutter-sm" v-else-if="col.name === 'commandNo'">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.commandNo"
+                      hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`"
+                      @update:model-value="onUpdateData"
+                    />
+
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formData.commandYear"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      teleport-center
+                      @update:model-value="onUpdateData"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          hide-bottom-space
+                          :model-value="
+                            formData.commandYear == null
+                              ? null
+                              : formData.commandYear + 543
+                          "
+                          :label="`${'พ.ศ.'}`"
+                          clearable
+                          @clear="formData.commandYear = null"
+                          @update:model-value="onUpdateData"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+
+                  <div
+                    class="q-gutter-sm"
+                    v-else-if="col.name === 'commandCode'"
+                  >
+                    <q-select
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.commandCode"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="commandCodeOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      hide-selected
+                      fill-input
+                      input-debounce="0"
+                      @update:model-value="onUpdateData"
+                      @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'commandCode'
+                )"
+                    >
+                      <template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-grey">
+                            ไม่มีข้อมูล
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
+
+                  <div class="row justify-around q-pt-sm">
+                    <q-btn
+                      flat
+                      color="primary"
+                      label="ยกเลิก"
+                      @click="scope.cancel"
+                    />
+
+                    <q-btn
+                      flat
+                      color="primary"
+                      label="บันทึก"
+                      @click="onSave(formData, props.row.id, scope.cancel)"
+                    />
+                  </div>
+                </q-popup-edit>
+              </div>
+
               <div v-else-if="col.name === 'organization'" class="text-html">
                 {{
                   findOrgNameHtml({
@@ -564,13 +1189,225 @@ onMounted(() => {
                     child4: props.row.orgChild4,
                   })
                 }}
+
+                <q-popup-edit
+                  v-if="
+                    tabs === 'PENDING' &&
+                    statusCheckEdit == 'PENDING' &&
+                    isConfirmEdit
+                  "
+                  v-model="props.row[col.name]"
+                  v-slot="scope"
+                  label-set="บันทึก"
+                  label-cancel="ยกเลิก"
+                  @before-show="onShow(props.row, col.name)"
+                  @hide="onHide"
+                >
+                  <div class="q-mb-xs">
+                    {{ `แก้ไข${col.label}` }}
+                  </div>
+
+                  <div class="q-gutter-sm">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.orgRoot"
+                      hide-bottom-space
+                      :label="`${'หน่วยงาน'}`"
+                      @update:model-value="onUpdateData"
+                    />
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.orgChild1"
+                      hide-bottom-space
+                      :label="`${'ส่วนราชการระดับ 1'}`"
+                      @update:model-value="onUpdateData"
+                    />
+
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.orgChild2"
+                      hide-bottom-space
+                      :label="`${'ส่วนราชการระดับ 2'}`"
+                      @update:model-value="onUpdateData"
+                    />
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.orgChild3"
+                      hide-bottom-space
+                      :label="`${'ส่วนราชการระดับ 3'}`"
+                      @update:model-value="onUpdateData"
+                    />
+
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.orgChild4"
+                      hide-bottom-space
+                      :label="`${'ส่วนราชการระดับ 4'}`"
+                      @update:model-value="onUpdateData"
+                    />
+                  </div>
+                  <div class="row justify-around q-pt-sm">
+                    <q-btn
+                      flat
+                      color="primary"
+                      label="ยกเลิก"
+                      @click="scope.cancel"
+                    />
+
+                    <q-btn
+                      flat
+                      color="primary"
+                      label="บันทึก"
+                      @click="onSave(formData, props.row.id, scope.cancel)"
+                    />
+                  </div>
+                </q-popup-edit>
               </div>
 
-              <div v-else-if="col.name === 'commandCode'">
-                {{ col.value ? col.value : "-" }}
-              </div>
               <div v-else>
                 {{ col.value ? col.value : "-" }}
+                <q-popup-edit
+                  v-if="
+                    tabs === 'PENDING' &&
+                    statusCheckEdit == 'PENDING' &&
+                    isConfirmEdit
+                  "
+                  v-slot="scope"
+                  :persistent="
+                    col.name === 'commandDateAffect' ||
+                    col.name === 'commandDateSign'
+                  "
+                  v-model="props.row[col.name]"
+                  buttons
+                  label-set="บันทึก"
+                  label-cancel="ยกเลิก"
+                  @save="onSave"
+                  @before-show="onShow(props.row, col.name)"
+                  @hide="onHide"
+                >
+                  <div class="q-mb-xs">
+                    {{ `แก้ไข${col.label}` }}
+                  </div>
+
+                  <!-- แก้ไขวันที่คำสั่งมีผล -->
+                  <datepicker
+                    v-if="
+                      col.name === 'commandDateAffect' ||
+                      col.name === 'commandDateSign'
+                    "
+                    v-model="scope.value"
+                    :locale="'th'"
+                    :enableTimePicker="false"
+                    week-start="0"
+                    autoApply
+                    teleport-center
+                    @update:model-value="onUpdateData"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        borderless
+                        :model-value="
+                          scope.value ? date2Thai(scope.value) : null
+                        "
+                        hide-bottom-space
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            color="primary"
+                            class="cursor-pointer"
+                          />
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+
+                  <q-input
+                    v-else-if="
+                      col.name === 'positionName' ||
+                      col.name === 'positionExecutive' ||
+                      col.name === 'remark'
+                    "
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    v-model="scope.value"
+                    hide-bottom-space
+                    @update:model-value="onUpdateData"
+                  />
+
+                  <q-input
+                    v-else-if="
+                      col.name === 'mouthSalaryAmount' ||
+                      col.name === 'positionSalaryAmount'
+                    "
+                    dense
+                    outlined
+                    v-model="scope.value"
+                    mask="###,###,###,###"
+                    reverse-fill-mask
+                    lazy-rules
+                    hide-bottom-space
+                    @update:model-value="onUpdateData"
+                  />
+
+                  <q-select
+                    v-else-if="col.name === 'positionType'"
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    v-model="scope.value"
+                    :label="
+                      empType === 'officer' ? 'ตำแหน่งประเภท' : 'กลุ่มงาน'
+                    "
+                    emit-value
+                    map-options
+                    option-label="name"
+                    :options="posTypeOptions"
+                    option-value="name"
+                    hide-bottom-space
+                    use-input
+                    hide-selected
+                    fill-input
+                    clearable
+                    input-debounce="0"
+                    @update:model-value="updateSelectType, onUpdateData()"
+                    @filter="(inputValue: string,
+                  doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
+                  )"
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </q-popup-edit>
               </div>
             </q-td>
           </q-tr>