รายการ แก้ไขทะเบียนประวัติ ตำแหน่ง/เงินเดือน

src/api/02_organizational/api.organization.ts

@@ -178,4 +178,9 @@ export default {
   keycloakLogSSO: `${organization}/keycloak/log/sso`,
 
   reportOrgByType: (type: string) => `${reportOrg}/registry-${type}`,
+
+  //EditPage
+  salaryTemp: `${orgProfile}/salaryTemp`,
+  profileidPosition: (type: string) =>
+    `${orgProfile}${type}/profileid/position`,
 };

src/modules/04_registryPerson/router.ts

@@ -138,7 +138,7 @@ export default [
     },
   },
   {
-    path: "/registry/edit/salary/:id",
+    path: "/registry/edit/salary/:type/:id",
     name: "registryEditSalary",
     component: EditListSalaryPage,
     meta: {

src/modules/04_registryPerson/stores/Edit.ts

@@ -0,0 +1,39 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {} = mixin;
+
+export const useEditPosDataStore = defineStore("EditPos", () => {
+  const commandCodeData = ref<DataOption[]>([]);
+  const posTypeData = ref<DataOption[]>([]); //รายการประเภทตำแหน่ง | กลุ่มงาน
+  const posLevelData = ref<DataOption[]>([]); //รายการระดับตำแหน่ง | ระดับชั้นงาน
+  const posLineData = ref<DataOption[]>([]); //รายการสายงาน
+  const posPathSideData = ref<DataOption[]>([]); //รายการด้าน/สาขา
+  const posExecutiveData = ref<DataOption[]>([]); //รายการตำแหน่งทางการบริหาร
+
+  function convertCommandCodeName(val: string) {
+    return (
+      commandCodeData.value.find((e: DataOption) => e.id === val)?.name ?? "-"
+    );
+  }
+
+  return {
+    // Data
+    commandCodeData,
+    posTypeData,
+    posLevelData,
+    posLineData,
+    posPathSideData,
+    posExecutiveData,
+
+    // Function
+    convertCommandCodeName,
+  };
+});

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

@@ -0,0 +1,473 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, nextTick, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import FormPosition from "@/modules/04_registryPerson/views/edit/components/FormPosition.vue";
+
+const $q = useQuasar();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+
+  convertDateToAPI,
+} = useCounterMixin();
+const store = useEditPosDataStore();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const empType = defineModel<string>("empType", { required: true });
+const rowData = defineModel<any[]>("rowData", { required: true });
+const rowIndex = defineModel<number>("rowIndex", { required: true });
+
+const props = defineProps({
+  fetchData: { type: Function, required: true },
+});
+
+const formData = reactive({
+  commandCode: "", //ประเภทคำสั่ง
+  commandNo: "", //เลขที่คำสั่ง
+  commandYear: null, //ปี
+  commandDateAffect: null, //วันที่มีผล
+  commandDateSign: null, //วันที่ลงนาม
+  posNoAbb: "", //ตัวย่อเลขที่ตำแหน่ง
+  posNo: "", //เลขที่ตำแหน่ง
+  positionName: "", //ตำแหน่ง
+  positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
+  positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
+  positionCee: "", //ตำแหน่งซี
+  positionLine: "", // สายงาน
+  positionPathSide: "", //ด้าน/สาขา
+  positionExecutive: "", //ตำแหน่งทางการบริหาร
+  amount: null, //เงินเดือน
+  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
+  positionSalaryAmount: null, //เงินประจำตำแหน่ง
+  mouthSalaryAmount: null, //เงินค่าตอบแทนรายเดือน
+  orgRoot: "", //หน่วยงาน
+  orgChild1: "", //ส่วนราชการระดับ 1
+  orgChild2: "", //ส่วนราชการระดับ 2
+  orgChild3: "", //ส่วนราชการระดับ 3
+  orgChild4: "", //ส่วนราชการระดับ 4
+  remark: "", //หมายเหตุ
+});
+const formReadonly = reactive({
+  commandCode: "", //ประเภทคำสั่ง
+  commandNo: "", //เลขที่คำสั่ง
+  commandYear: null, //ปี
+  commandDateAffect: null, //วันที่มีผล
+  commandDateSign: null, //วันที่ลงนาม
+  posNoAbb: "", //ตัวย่อเลขที่ตำแหน่ง
+  posNo: "", //เลขที่ตำแหน่ง
+  positionName: "", //ตำแหน่ง
+  positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
+  positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
+  positionCee: "", //ตำแหน่งซี
+  positionLine: "", // สายงาน
+  positionPathSide: "", //ด้าน/สาขา
+  positionExecutive: "", //ตำแหน่งทางการบริหาร
+  amount: null, //เงินเดือน
+  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
+  positionSalaryAmount: null, //เงินประจำตำแหน่ง
+  mouthSalaryAmount: null, //เงินค่าตอบแทนรายเดือน
+  orgRoot: "", //หน่วยงาน
+  orgChild1: "", //ส่วนราชการระดับ 1
+  orgChild2: "", //ส่วนราชการระดับ 2
+  orgChild3: "", //ส่วนราชการระดับ 3
+  orgChild4: "", //ส่วนราชการระดับ 4
+  remark: "", //หมายเหตุ
+});
+
+const dataLevel = ref<any[]>([]); //รายการ ตำแหน่งเงินเดือน
+const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
+const posTypeOptions = ref<DataOption[]>(store.posTypeData); //รายการประเภทตำแหน่ง | กลุ่มงาน
+const posLevelOptions = ref<DataOption[]>(store.posLevelData); //รายการระดับตำแหน่ง | ระดับชั้นงาน
+const posLineOptions = ref<DataOption[]>(store.posLineData); //รายการสายงาน
+const posPathSideOptions = ref<DataOption[]>(store.posPathSideData); //รายการด้าน/สาขา
+const posExecutiveOptions = ref<DataOption[]>(store.posExecutiveData); //รายการตำแหน่งทางการบริหาร
+
+const salaryId = ref<string>("");
+
+async function fetchDataPosition() {
+  try {
+    const res = await http.get(
+      config.API.salaryTemp + `/get/${salaryId.value}`
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  }
+}
+
+/** function fetch ข้อมูลประเภทคำสั่ง*/
+async function fetchDataCommandCode() {
+  if (store.commandCodeData.length > 0) return false;
+  await http
+    .get(config.API.orgCommandCode)
+    .then((res) => {
+      const data = res.data.result;
+
+      store.commandCodeData = data.map((e: any) => ({
+        id: e.code.toString(),
+        name: e.name,
+      }));
+
+      commandCodeOptions.value = store.commandCodeData;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetch ข้อมูลปรเภทตำแหน่งข้าราชการ */
+async function fetchType() {
+  await http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+      store.posTypeData = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      posTypeOptions.value = store.posTypeData;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetch ข้อมูลปรเภทตำแหน่งลูกจ้าง*/
+async function fetchOptionGroup() {
+  await http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+      store.posTypeData = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      posTypeOptions.value = store.posTypeData;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetch ข้อมูลสายงาน*/
+async function fetchDataOption() {
+  if (store.posLineData.length > 0 && store.posPathSideData.length > 0)
+    return false;
+
+  await http
+    .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
+    .then((res) => {
+      const data = res.data.result;
+
+      const seen = new Set();
+      const seen2 = new Set();
+
+      const listPositionField = data.filter((item: any) => {
+        if (seen.has(item.positionField)) {
+          return false;
+        } else {
+          seen.add(item.positionField);
+          return true;
+        }
+      });
+      store.posLineData = listPositionField.map((e: any) => ({
+        id: e.positionField,
+        name: e.positionField,
+      }));
+
+      const listPositionArea = data.filter((item: any) => {
+        if (
+          item.positionArea === null ||
+          item.positionArea === "" ||
+          item.positionArea === "-" ||
+          seen2.has(item.positionArea)
+        ) {
+          return false;
+        } else {
+          seen2.add(item.positionArea);
+          return true;
+        }
+      });
+      store.posPathSideData = listPositionArea.map((e: any) => ({
+        id: e.positionArea,
+        name: e.positionArea,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetch ข้อมูลตำแหน่งข้อมูลทางการบริหาร*/
+async function fetchDataOptionExecutive() {
+  await http
+    .get(config.API.orgPosExecutive)
+    .then((res) => {
+      const data = res.data.result;
+      store.posExecutiveData = data.map((e: any) => ({
+        id: e.posExecutiveName,
+        name: e.posExecutiveName,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function เลือกประเภทตำแหน่ง
+ * @param val id ประเภทตำแหน่ง
+ * @param status แก่ไข , เพิ่ม
+ */
+async function updateSelectType(val: string, status: boolean = false) {
+  const listLevel = val
+    ? dataLevel.value.find((e: any) => e.posTypeName === val)
+    : null;
+
+  if (listLevel) {
+    store.posLevelData = listLevel.posLevels.map((e: any) => ({
+      id: e.id,
+      name:
+        empType.value === "officer"
+          ? e.posLevelName
+          : `${listLevel.posTypeShortName} ${e.posLevelName}`,
+    }));
+
+    formData.positionLevel = !status ? "" : formData.positionLevel;
+  } else {
+    store.posLevelData = [];
+    formData.positionLevel = "";
+  }
+}
+
+async function onDefineData(index: number) {
+  const data = rowData.value[index];
+  salaryId.value = data.id;
+
+  const newData = await fetchDataPosition();
+  updateSelectType(data.positionType);
+
+  if (newData) {
+    const salaryNew = newData.salaryNew;
+    const salaryOld = newData.salaryOld;
+
+    formData.commandCode = salaryNew.commandCode;
+    formData.commandNo = salaryNew.commandNo;
+    formData.commandYear = salaryNew.commandYear;
+    formData.commandDateAffect = salaryNew.commandDateAffect;
+    formData.commandDateSign = salaryNew.commandDateSign;
+    formData.posNoAbb = salaryNew.posNoAbb;
+    formData.posNo = salaryNew.posNo;
+    formData.positionName = salaryNew.positionName;
+    formData.positionType = salaryNew.positionType;
+    formData.positionLevel = salaryNew.positionLevel;
+    formData.positionCee = salaryNew.positionCee;
+    formData.positionLine = salaryNew.positionLine;
+    formData.positionPathSide = salaryNew.positionPathSide;
+    formData.positionExecutive = salaryNew.positionExecutive;
+    formData.amount = salaryNew.amount;
+    formData.amountSpecial = salaryNew.amountSpecial;
+    formData.positionSalaryAmount = salaryNew.positionSalaryAmount;
+    formData.mouthSalaryAmount = salaryNew.mouthSalaryAmount;
+    formData.orgRoot = salaryNew.orgRoot;
+    formData.orgChild1 = salaryNew.orgChild1;
+    formData.orgChild2 = salaryNew.orgChild2;
+    formData.orgChild3 = salaryNew.orgChild3;
+    formData.orgChild4 = salaryNew.orgChild4;
+    formData.remark = salaryNew.remark;
+
+    formReadonly.commandCode = salaryOld.commandCode;
+    formReadonly.commandNo = salaryOld.commandNo;
+    formReadonly.commandYear = salaryOld.commandYear;
+    formReadonly.commandDateAffect = salaryOld.commandDateAffect;
+    formReadonly.commandDateSign = salaryOld.commandDateSign;
+    formReadonly.posNoAbb = salaryOld.posNoAbb;
+    formReadonly.posNo = salaryOld.posNo;
+    formReadonly.positionName = salaryOld.positionName;
+    formReadonly.positionType = salaryOld.positionType;
+    formReadonly.positionLevel = salaryOld.positionLevel;
+    formReadonly.positionCee = salaryOld.positionCee;
+    formReadonly.positionLine = salaryOld.positionLine;
+    formReadonly.positionPathSide = salaryOld.positionPathSide;
+    formReadonly.positionExecutive = salaryOld.positionExecutive;
+    formReadonly.amount = salaryOld.amount;
+    formReadonly.positionSalaryAmount = salaryOld.positionSalaryAmount;
+    formReadonly.mouthSalaryAmount = salaryOld.mouthSalaryAmount;
+    formReadonly.orgRoot = salaryOld.orgRoot;
+    formReadonly.orgChild1 = salaryOld.orgChild1;
+    formReadonly.orgChild2 = salaryOld.orgChild2;
+    formReadonly.orgChild3 = salaryOld.orgChild3;
+    formReadonly.orgChild4 = salaryOld.orgChild4;
+    formReadonly.remark = salaryOld.remark;
+  }
+}
+
+async function onNavigateRow(action: string) {
+  action === "next" ? (rowIndex.value += 1) : (rowIndex.value -= 1);
+  await nextTick();
+  onDefineData(rowIndex.value);
+}
+
+function onClickCloseDialog() {
+  modal.value = false;
+}
+
+function onSubmit() {
+  console.log(formData);
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .patch(config.API.salaryTemp + `/${salaryId.value}`, {
+        ...formData,
+        type: empType.value?.toLocaleUpperCase(),
+        commandDateAffect: convertDateToAPI(formData.commandDateAffect),
+        commandDateSign: convertDateToAPI(formData.commandDateSign),
+        amount: Number(String(formData.amount)?.replace(/,/g, "")),
+        amountSpecial: Number(
+          String(formData.amountSpecial)?.replace(/,/g, "")
+        ),
+        positionSalaryAmount: Number(
+          String(formData.positionSalaryAmount)?.replace(/,/g, "")
+        ),
+        mouthSalaryAmount: Number(
+          String(formData.mouthSalaryAmount)?.replace(/,/g, "")
+        ),
+      })
+      .then(async () => {
+        await props.fetchData?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        onClickCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+watch(modal, async (val) => {
+  if (val) {
+    showLoader();
+    if (empType.value === "officer") {
+      await Promise.all([
+        fetchType(),
+        fetchDataOption(),
+        fetchDataOptionExecutive(),
+      ]);
+    } else {
+      await fetchOptionGroup();
+    }
+
+    commandCodeOptions.value = store.commandCodeData;
+    posTypeOptions.value = store.posTypeData;
+    posLevelOptions.value = store.posLevelData;
+    posLineOptions.value = store.posLineData;
+    posPathSideOptions.value = store.posPathSideData;
+    posExecutiveOptions.value = store.posExecutiveData;
+    await onDefineData(rowIndex.value);
+    hideLoader();
+  }
+});
+
+onMounted(async () => {
+  await fetchDataCommandCode();
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="'แก้ไขตำแหน่งเงินเดือนเงินเดือน'"
+          :close="onClickCloseDialog"
+        />
+        <q-separator />
+
+        <q-card-section style="padding: 0px">
+          <div class="col-12 row">
+            <div class="col-xs-12 col-md-6 row no-wrap">
+              <div class="col-12 q-pa-md">
+                <FormPosition
+                  :is-readonly="true"
+                  :form-data="formReadonly"
+                  :command-code-options="commandCodeOptions"
+                  :pos-type-options="posTypeOptions"
+                  :pos-level-options="posLevelOptions"
+                  :pos-line-options="posLineOptions"
+                  :pos-path-side-options="posPathSideOptions"
+                  :pos-executive-options="posExecutiveOptions"
+                  :emp-type="empType"
+                  :update-select-type="updateSelectType"
+                />
+              </div>
+              <div class="col-12 row">
+                <q-separator :vertical="!$q.screen.lt.md" />
+              </div>
+            </div>
+
+            <div class="col-xs-12 col-md-6 row">
+              <div class="col-12 q-pa-md">
+                <FormPosition
+                  :is-readonly="false"
+                  v-model:form-data="formData"
+                  v-model:command-code-options="commandCodeOptions"
+                  v-model:pos-type-options="posTypeOptions"
+                  v-model:pos-level-options="posLevelOptions"
+                  v-model:pos-line-options="posLineOptions"
+                  v-model:pos-path-side-options="posPathSideOptions"
+                  v-model:pos-executive-options="posExecutiveOptions"
+                  :emp-type="empType"
+                  :update-select-type="updateSelectType"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+          <q-btn
+            :disable="rowIndex === 0"
+            label="ก่อนหน้า"
+            color="public"
+            icon="mdi-arrow-left"
+            @click.stop.pervent="onNavigateRow('previous')"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+
+          <q-btn
+            :disable="rowIndex + 1 === rowData.length"
+            label="ถัดไป"
+            color="public"
+            icon-right="mdi-arrow-right"
+            @click.stop.pervent="onNavigateRow('next')"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,669 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  pathRegistryEmp,
+  onSearchDataTable,
+  convertDateToAPI,
+} = useCounterMixin();
+const store = useEditPosDataStore();
+
+const isReadonly = defineModel<boolean>("isReadonly", { required: true });
+const empType = defineModel<string>("empType", { required: true });
+const formData = defineModel<any>("formData", { required: true });
+const commandCodeOptions = defineModel<DataOption[]>("commandCodeOptions", {
+  required: true,
+});
+const posTypeOptions = defineModel<DataOption[]>("posTypeOptions", {
+  required: true,
+});
+const posLevelOptions = defineModel<DataOption[]>("posLevelOptions", {
+  required: true,
+});
+const posLineOptions = defineModel<DataOption[]>("posLineOptions", {
+  required: true,
+});
+const posPathSideOptions = defineModel<DataOption[]>("posPathSideOptions", {
+  required: true,
+});
+const posExecutiveOptions = defineModel<DataOption[]>("posExecutiveOptions", {
+  required: true,
+});
+
+const props = defineProps({
+  updateSelectType: { type: Function, defult: () => {} },
+});
+
+/**
+ * ฟิลเตอร์ข้อมูลจาก 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;
+
+    case "posLine":
+      update(() => {
+        posLineOptions.value = store.posLineData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "posPathSide":
+      update(() => {
+        posPathSideOptions.value = store.posPathSideData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "posExecutive":
+      update(() => {
+        posExecutiveOptions.value = store.posExecutiveData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
+function classInput(val: boolean) {
+  return {
+    "full-width  cursor-pointer": val,
+    "full-width  inputgreen cursor-pointer": !val,
+  };
+}
+</script>
+
+<template>
+  <div class="row col-12 q-col-gutter-sm">
+    <div class="col-xs-12 col-sm-12 col-md-8">
+      <!-- :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']" -->
+      <q-select
+        outlined
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.commandCode"
+        :label="`${'ประเภทคำสั่ง'}`"
+        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="props.updateSelectType"
+        @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="col-xs-6 col-sm-6 col-md-4">
+      <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ]" -->
+      <datepicker
+        :readonly="isReadonly"
+        v-model="formData.commandDateAffect"
+        :locale="'th'"
+        autoApply
+        :enableTimePicker="false"
+        week-start="0"
+        :class="classInput(isReadonly)"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            :readonly="isReadonly"
+            outlined
+            dense
+            borderless
+            :model-value="date2Thai(formData.commandDateAffect)"
+            :label="`${'วันที่คำสั่งมีผล'}`"
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="event" color="primary" class="cursor-pointer">
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+    </div>
+
+    <div class="col-xs-6 col-sm-12 col-md-8">
+      <div class="row q-col-gutter-sm">
+        <div class="col-6">
+          <q-input
+            :readonly="isReadonly"
+            :class="classInput(isReadonly)"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.commandNo"
+            hide-bottom-space
+            :label="`${'เลขที่คำสั่ง'}`"
+          />
+        </div>
+        <label class="col-1 flex justify-center items-center">/</label>
+        <div class="col-5">
+          <!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formData.commandYear"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+            class="inputgreen"
+            :readonly="isReadonly"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                :readonly="isReadonly"
+                dense
+                outlined
+                hide-bottom-space
+                :model-value="
+                  formData.commandYear == null
+                    ? null
+                    : formData.commandYear + 543
+                "
+                :label="`${'พ.ศ.'}`"
+              >
+                <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>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือก วันที่ลงนาม'}`,]" -->
+      <datepicker
+        v-model="formData.commandDateSign"
+        :locale="'th'"
+        autoApply
+        :enableTimePicker="false"
+        week-start="0"
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            :readonly="isReadonly"
+            outlined
+            dense
+            borderless
+            :model-value="date2Thai(formData.commandDateSign)"
+            :label="`${'วันที่ลงนาม'}`"
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="event" color="primary" class="cursor-pointer">
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+    </div>
+
+    <div class="col-12">
+      <q-separator />
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.posNoAbb"
+        hide-bottom-space
+        :label="`${'ตัวย่อ'}`"
+      >
+      </q-input>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]" -->
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.posNo"
+        hide-bottom-space
+        :label="empType === '' ? 'เลขที่ตำแหน่ง' : 'ตำแหน่งเลขที่'"
+      >
+      </q-input>
+    </div>
+
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']" -->
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionName"
+        :label="empType == '' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
+        hide-bottom-space
+      />
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]" -->
+      <q-select
+        outlined
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionType"
+        :label="empType == '' ? 'ประเภทตำแหน่ง' : 'กลุ่มงาน'"
+        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="props.updateSelectType"
+        @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>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']" -->
+      <q-select
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        :disable="!formData.positionType"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionLevel"
+        :label="empType == '' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
+        emit-value
+        map-options
+        option-label="name"
+        :options="posLevelOptions"
+        option-value="name"
+        hide-bottom-space
+        use-input
+        hide-selected
+        fill-input
+        input-debounce="0"
+        @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>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionCee"
+        hide-bottom-space
+        :label="`${'ระดับซี'}`"
+      >
+      </q-input>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+      <q-select
+        outlined
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionLine"
+        :label="`${'สายงาน'}`"
+        emit-value
+        map-options
+        option-label="name"
+        :options="posLineOptions"
+        option-value="id"
+        hide-bottom-space
+        use-input
+        hide-selected
+        fill-input
+        clearable
+        input-debounce="0"
+        @filter="(inputValue: string,
+                  doneFn: Function) => filterSelector(inputValue, doneFn, 'posLine'
+                  )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template></q-select
+      >
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+      <q-select
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionPathSide"
+        :label="`${'ด้าน/สาขา'}`"
+        emit-value
+        map-options
+        option-label="name"
+        :options="posPathSideOptions"
+        option-value="id"
+        hide-bottom-space
+        use-input
+        hide-selected
+        fill-input
+        clearable
+        input-debounce="0"
+        @filter="(inputValue: string,
+                  doneFn: Function) => filterSelector(inputValue, doneFn, 'posPathSide'
+                  )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+      <q-select
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionExecutive"
+        :label="`${'ตำแหน่งทางการบริหาร'}`"
+        emit-value
+        map-options
+        option-label="name"
+        :options="posExecutiveOptions"
+        option-value="id"
+        hide-bottom-space
+        use-input
+        hide-selected
+        fill-input
+        input-debounce="0"
+        clearable
+        @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'posExecutive'
+                )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+
+    <div class="col-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-xs-6 col-sm-6 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            ref="salaryRef"
+            dense
+            outlined
+            v-model="formData.amount"
+            label="เงินเดือน"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            :rules="!isReadonly ? [(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`] :[]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-6 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            ref="amountSpecialRef"
+            dense
+            outlined
+            v-model="formData.amountSpecial"
+            label="เงินค่าตอบแทนพิเศษ"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-6 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            dense
+            outlined
+            v-model="formData.positionSalaryAmount"
+            label="เงินประจำตำแหน่ง"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-6 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            dense
+            outlined
+            v-model="formData.mouthSalaryAmount"
+            label="เงินค่าตอบแทนรายเดือน"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-xs-12 col-sm-4 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.orgRoot"
+            hide-bottom-space
+            :label="`${'หน่วยงาน'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-4 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.orgChild1"
+            hide-bottom-space
+            :label="`${'ส่วนราชการระดับ 1'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-4 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.orgChild2"
+            hide-bottom-space
+            :label="`${'ส่วนราชการระดับ 2'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-4 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.orgChild3"
+            hide-bottom-space
+            :label="`${'ส่วนราชการระดับ 3'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-4 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.orgChild4"
+            hide-bottom-space
+            :label="`${'ส่วนราชการระดับ 4'}`"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        ref="docRef"
+        outlined
+        dense
+        borderless
+        v-model="formData.remark"
+        :label="`${'หมายเหตุ'}`"
+        type="textarea"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,524 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+
+import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+
+const route = useRoute();
+const store = useEditPosDataStore();
+
+const empType = ref<string>(route.params.type.toString());
+const profileId = ref<string>(route.params.id.toString());
+
+const tabs = defineModel<string>("tabs", { required: true });
+
+import type { QTableColumn } from "quasar";
+
+import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
+
+const $q = useQuasar();
+const {
+  date2Thai,
+  findOrgName,
+  onSearchDataTable,
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
+//Table
+const isLoad = ref<boolean>(true);
+const rowIndex = ref<number>(0);
+const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);
+const keyword = ref<string>("");
+const baseColumns = ref<QTableColumn[]>([
+  {
+    name: "commandDateAffect",
+    align: "left",
+    label: "วันที่คำสั่งมีผล",
+    sortable: false,
+    field: "commandDateAffect",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandDateSign",
+    align: "left",
+    label: "วันที่ลงนาม",
+    sortable: false,
+    field: "commandDateSign",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: empType.value === "employee" ? "ตำแหน่งเลขที่" : "เลขที่ตำแหน่ง",
+    sortable: false,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posNoAbb && row.posNo
+        ? `${row.posNoAbb}${row.posNo}`
+        : row.posNo
+        ? row.posNo
+        : "-";
+    },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: empType.value === "employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน",
+    sortable: false,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: empType.value === "employee" ? "กลุ่มงาน" : "ตำแหน่งประเภท",
+    sortable: false,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: empType.value === "employee" ? "ระดับชั้นงาน" : "ระดับ",
+    sortable: false,
+    field: "positionLevel",
+    format(val, row) {
+      return `${
+        row.positionLevel
+          ? row.positionLevel
+          : row.positionCee
+          ? row.positionCee
+          : "-"
+      }`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: false,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: false,
+    field: "commandNo",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+        : "";
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandCode",
+    align: "left",
+    label: "ประเภทคำสั่ง",
+    sortable: false,
+    field: "commandCode",
+    format(val, row) {
+      return store.convertCommandCodeName(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: false,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName({
+        root: row.orgRoot,
+        child1: row.orgChild1,
+        child2: row.orgChild2,
+        child3: row.orgChild3,
+        child4: row.orgChild4,
+      });
+    },
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: empType.value === "employee" ? "ค่าจ้าง" : "เงินเดือน",
+    sortable: false,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(v, row) {
+      return row.amount
+        ? `${row.amount.toLocaleString()}${
+            row.amountSpecial !== 0 && row.amountSpecial
+              ? ` (${row.amountSpecial.toLocaleString()})`
+              : ""
+          }`
+        : "-";
+    },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: false,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: false,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: false,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "commandDateAffect",
+  "posNo",
+  "positionName",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "commandNo",
+  "commandCode",
+  "commandDateSign",
+  "organization",
+  "remark",
+]);
+const columns = computed<QTableColumn[]>(() => {
+  if (empType.value === "employee") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
+const modal = ref<boolean>(false);
+
+async function fetchData() {
+  isLoad.value = true;
+  rowsMain.value = [];
+  rows.value = [];
+  const paht =
+    tabs.value === "PENDING"
+      ? `/${empType.value}/${profileId.value}`
+      : `/${empType.value}/done/${profileId.value}`;
+  http
+    .get(config.API.salaryTemp + `${paht}`)
+    .then((res) => {
+      const data = res.data.result;
+      rowsMain.value = data;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      isLoad.value = false;
+    });
+}
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function onEditData(index: number) {
+  rowIndex.value = index;
+  modal.value = true;
+}
+
+async function onSwapData(action: string, id: string) {
+  showLoader();
+  await http
+    .get(config.API.salaryTemp + `/swap/${action}/${id}`)
+    .then(async () => {
+      await fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onDeleteData(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.salaryTemp + `/delete`, {
+        type: empType.value,
+        salaryId: id,
+      })
+      .then(async () => {
+        await fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function classColorRow(isDelete: boolean, isEdit: boolean, isEntry: boolean) {
+  return isDelete
+    ? "text-red"
+    : isEdit
+    ? "text-yellow-8"
+    : isEntry
+    ? "text-grey"
+    : "";
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <div class="row q-col-gutter-sm">
+    <div class="col-12">
+      <div class="row q-col-gutter-sm">
+        <q-space />
+        <q-input
+          dense
+          outlined
+          v-model="keyword"
+          label="ค้นหา"
+          @keydown.enter.pervent="serchDataTable"
+        >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          style="min-width: 140px"
+        />
+      </div>
+    </div>
+
+    <div class="col-12">
+      <d-table
+        ref="table"
+        row-key="id"
+        flat
+        bordered
+        dense
+        :columns="columns"
+        :rows="rows"
+        :paging="true"
+        :rows-per-page-options="[20, 50, 100]"
+        :visible-columns="visibleColumns"
+        :loading="isLoad"
+      >
+        >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-if="tabs === 'PENDING'" />
+            <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-if="tabs === 'PENDING'">
+              <q-btn
+                dense
+                flat
+                round
+                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1"
+                icon="mdi-arrow-up-bold"
+                @click.stop.pervent="onSwapData('up', props.row.id)"
+              />
+              <q-btn
+                dense
+                flat
+                round
+                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1"
+                icon="mdi-arrow-down-bold"
+                @click.stop.pervent="onSwapData('down', props.row.id)"
+              >
+              </q-btn>
+
+              <q-btn
+                flat
+                dense
+                round
+                color="edit"
+                icon="edit"
+                @click.stop.pervent="onEditData(props.rowIndex)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                dense
+                round
+                icon="delete"
+                :color="props.row.isDelete ? 'grey' : 'red'"
+                :disable="props.row.isDelete"
+                @click.stop.pervent="onDeleteData(props.row.id)"
+              >
+                <q-tooltip>ลบ</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td
+              v-for="col in props.cols"
+              :key="col.id"
+              :class="
+                classColorRow(
+                  props.row.isDelete,
+                  props.row.isEdit,
+                  props.row.isEntry
+                )
+              "
+            >
+              <div
+                v-if="col.name === 'organization'"
+                class="text-html table_ellipsis"
+              >
+                {{ col.value ? col.value : "-" }}
+              </div>
+              <div
+                v-else-if="col.name === 'commandCode'"
+                class="table_ellipsis"
+              >
+                {{ col.value ? col.value : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </div>
+
+  <DialogForm
+    v-model:modal="modal"
+    v-model:row-index="rowIndex"
+    :emp-type="empType"
+    :row-data="rows"
+    :fetch-data="fetchData"
+  />
+</template>
+
+<style scoped></style>

src/modules/04_registryPerson/views/edit/list.vue

@@ -4,33 +4,287 @@ import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 
 /** importType*/
-import type {
-  DataNodeData,
-  QueryParams,
-} from "@/modules/04_registryPerson/interface/request/Main";
-import type {
-  DataPerson,
-  DataType,
-} from "@/modules/04_registryPerson/interface/response/Main";
+import type { QTableColumn } from "quasar";
 
 const $q = useQuasar();
-const store = useRegistryNewDataStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 const route = useRoute();
 const router = useRouter();
 
-const empType = ref<string>("officer"); // officer / employee / perm
-const dataPersonMain = ref<DataPerson[]>([]); //ข้อมูลรายการที่ค้นหาข้อมูลทะเบียนประวัติ
+const organizationOps = ref<any[]>([]);
+const organizationOpsMain = ref<any[]>([]);
+const employeeClassOpsMain = ref<any[]>([
+  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
+  { id: "employee", name: "ลูกจ้างประจำ" },
+]);
+const employeeClassOps = ref<any[]>(employeeClassOpsMain.value);
+const statusOpsMain = ref<any[]>([
+  {
+    id: "ALL",
+    name: "ทั้งหมด",
+  },
+  {
+    id: "PENDING",
+    name: "ยังไม่ได้แก้ไข",
+  },
+  {
+    id: "EDITED",
+    name: "แก้ไขแล้ว",
+  },
+  {
+    id: "CHECKED",
+    name: "ตรวจสอบแล้ว",
+  },
+]);
+const statusOps = ref<any[]>(statusOpsMain.value);
 
-const isLoad = ref<boolean>(false); //โหลดข้อมูลโครงสร้าง
+//Table
+const organization = ref<string>("");
+const filter = reactive({
+  status: "ALL",
+  empType: "officer",
+  keyword: "",
+  page: 1,
+  pageSize: 10,
+});
+const total = ref<number>(0);
+const maxPage = ref<number>(0);
+const rows = ref<any[]>([]);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "posNo",
+    align: "left",
+    label: filter.empType === "officer" ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: filter.empType === "officer" ? "ตำแหน่งประเภท" : "กลุ่มงาน",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: filter.empType === "officer" ? "ระดับ" : "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posTypeShortName
+        ? row.posTypeShortName + " " + row.posLevel
+        : row.posLevel;
+    },
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statusCheckEdit",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statusCheckEdit",
+    format(val, row) {
+      return statusOpsMain.value.find((e) => e.id === val)?.name;
+    },
+    headerStyle: "font-size: 14px;pointer-events: none;",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "posNo",
+  "citizenId",
+  "fullName",
+  "position",
+  "posType",
+  "posLevel",
+  "org",
+  "statusCheckEdit",
+]);
+
+/** function fetch ข้อมูลโครงสร้างปัจจุบัน*/
+async function fetchActiveOrg() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      fetchListOrg(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch ข้อมูลหน่วยงาน
+ * @param id โครงสร้างปัจจุบัน
+ */
+function fetchListOrg(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
+    .then(async (res) => {
+      const data = await res.data.result.map((item: any) => ({
+        id: item.orgTreeId,
+        name: item.orgName,
+      }));
+      organizationOpsMain.value = data;
+      organizationOps.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ค้นหาคำใน select
+ * @param val คำค้นหา
+ * @param update function
+ * @param type ประเภท select
+ */
+function filterSelector(val: string, update: Function, type: string) {
+  switch (type) {
+    case "organization":
+      update(() => {
+        organizationOps.value = organizationOpsMain.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClass":
+      update(() => {
+        employeeClassOps.value = employeeClassOpsMain.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "status":
+      update(() => {
+        statusOps.value = statusOpsMain.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+/** function fetch รายการแก้ไขทะเบียนประวัติ ตำแหน่ง/เงินเดือน*/
+function fetchData() {
+  let queryParams = {
+    page: filter.page,
+    pageSize: filter.pageSize,
+    type: filter.empType?.toLocaleUpperCase(),
+    searchKeyword: filter.keyword,
+    statusCheckEdit: filter.status?.toLocaleUpperCase(),
+    rootId: organization.value,
+  };
+
+  if (organization.value !== "" && filter.empType !== "") {
+    rows.value = [];
+    showLoader();
+    http
+      .get(config.API.salaryTemp, { params: queryParams })
+      .then((res) => {
+        const data = res.data.result;
+        total.value = data.total;
+        maxPage.value = Math.ceil(data.total / filter.pageSize);
+        rows.value = data.data;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * function ค้นหาข้อมูล
+ * @param val true จะค้นหาหน้าแรก
+ */
+function onSearchData(val: boolean = true) {
+  if (val) {
+    filter.page = 1;
+  }
+
+  fetchData();
+}
+
+/**
+ * function เปลี่ยนแถวต่อหน้า
+ * @param newPagination ข้อมูล Pagination
+ */
+function updatePageSize(newPagination: any) {
+  filter.pageSize = newPagination.rowsPerPage;
+  onSearchData();
+}
+
+function onRedirectToPosition(id: string, type: string) {
+  const tyepeLower = type?.toLocaleLowerCase();
+  router.push(`/registry/edit/salary/${tyepeLower}/${id}`);
+}
 
 /** hook เมื่อมีการเรียกใช้ Components*/
-onMounted(async () => {});
+onMounted(async () => {
+  await fetchActiveOrg();
+});
 </script>
 
 <template>
@@ -39,6 +293,188 @@ onMounted(async () => {});
       แก้ไขทะเบียนประวัติ ตำแหน่ง/เงินเดือน
     </div>
   </div>
+  <q-card flat bordered class="q-pa-md q-col-gutter-sm">
+    <div class="row">
+      <q-select
+        outlined
+        dense
+        borderless
+        hide-selected
+        fill-input
+        hide-bottom-space
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+        v-model="organization"
+        :options="organizationOps"
+        label="หน่วยงาน"
+        use-input
+        @update:model-value="onSearchData()"
+        @filter="(inputValue: string,
+            doneFn: Function) => filterSelector(inputValue, doneFn,'organization' )"
+      >
+        <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 q-col-gutter-sm">
+      <q-select
+        outlined
+        dense
+        borderless
+        hide-selected
+        fill-input
+        hide-bottom-space
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+        v-model="filter.empType"
+        :options="employeeClassOps"
+        label="ประเภทตำแหน่ง"
+        use-input
+        @update:model-value="onSearchData()"
+        @filter="(inputValue: string,
+          doneFn: Function) => filterSelector(inputValue, doneFn,'employeeClass' )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-select
+        outlined
+        dense
+        borderless
+        hide-selected
+        fill-input
+        hide-bottom-space
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+        v-model="filter.status"
+        :options="statusOps"
+        label="สถานะ"
+        use-input
+        @update:model-value="onSearchData()"
+        @filter="(inputValue: string,
+        doneFn: Function) => filterSelector(inputValue, doneFn,'status' )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-space />
+      <q-input
+        dense
+        outlined
+        v-model="filter.keyword"
+        label="ค้นหา"
+        @keydown.enter.pervent="onSearchData()"
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        style="min-width: 140px"
+      />
+    </div>
+
+    <div class="col-12">
+      <d-table
+        ref="table"
+        row-key="id"
+        flat
+        bordered
+        dense
+        :columns="columns"
+        :rows="rows"
+        :paging="true"
+        :rows-per-page-options="[20, 50, 100]"
+        :visible-columns="visibleColumns"
+        @update:pagination="updatePageSize"
+      >
+        >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th />
+            <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"
+            class="cursor-pointer"
+            @click.stop,pervent="
+              onRedirectToPosition(props.row.id, props.row.type)
+            "
+          >
+            <q-td>
+              <q-icon
+                size="sm"
+                v-if="props.row.statusCheckEdit !== 'PENDING'"
+                :name="
+                  props.row.statusCheckEdit === 'CHECKED'
+                    ? 'mdi-check-circle'
+                    : 'mdi-alert-circle'
+                "
+                :color="
+                  props.row.statusCheckEdit === 'CHECKED' ? 'green' : 'orange-5'
+                "
+              />
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.id">
+              <div v-if="col.name === 'org'" class="text-html table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ total }} รายการ
+          <q-pagination
+            v-model="filter.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+            @update:model-value="onSearchData(false)"
+          ></q-pagination>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/views/edit/salary.vue

@@ -9,36 +9,235 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 
 /** importType*/
-import type {
-  DataNodeData,
-  QueryParams,
-} from "@/modules/04_registryPerson/interface/request/Main";
-import type {
-  DataPerson,
-  DataType,
-} from "@/modules/04_registryPerson/interface/response/Main";
+
+import Table from "@/modules/04_registryPerson/views/edit/components/Table.vue";
 
 const $q = useQuasar();
 const store = useRegistryNewDataStore();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm, findOrgName } =
+  useCounterMixin();
 const route = useRoute();
 const router = useRouter();
 
-const empType = ref<string>("officer"); // officer / employee / perm
-const dataPersonMain = ref<DataPerson[]>([]); //ข้อมูลรายการที่ค้นหาข้อมูลทะเบียนประวัติ
+const dataProfile = ref<any>();
+const tabs = ref<string>("PENDING");
+const empType = ref<string>(route.params.type.toString());
+const profileId = ref<string>(route.params.id.toString());
 
-const isLoad = ref<boolean>(false); //โหลดข้อมูลโครงสร้าง
+async function fetchDataProfile() {
+  showLoader();
+  await http
+    .get(
+      config.API.profileidPosition(
+        empType.value === "officer" ? "" : "-employee"
+      ) + `/${profileId.value}`
+    )
+    .then(async (res) => {
+      const data = res.data.result;
+      dataProfile.value = {
+        fullName: `${data.prefix}${data.firstName} ${data.lastName}`,
+        position: data.position,
+        citizenId: data.citizenId,
+        posNo: data.posNo,
+        posType: data.posTypeName,
+        posLevel: data.posLevelName,
+        org: findOrgName(data),
+      };
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onConfirmEdit() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .post(config.API.salaryTemp + `/confirm-edit`, {
+          profileId: profileId.value,
+          type: empType.value,
+        })
+        .then((res) => {})
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันเสร็จสิ้นการแก้ไข",
+    "ต้องการยืนยันเสร็จสิ้นการแก้ไขใช่หรือไม่?"
+  );
+}
+
+function onConfirmDone() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .post(config.API.salaryTemp + `/confirm-done`, {
+          profileId: profileId.value,
+          type: empType.value,
+        })
+        .then((res) => {})
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันข้อมูลถูกต้อง",
+    "ต้องการยืนยันข้อมูลถูกต้องใช่หรือไม่"
+  );
+}
 
 /** hook เมื่อมีการเรียกใช้ Components*/
-onMounted(async () => {});
+onMounted(async () => {
+  fetchDataProfile();
+});
 </script>
 
 <template>
   <div class="row items-center q-gutter-sm q-mb-xs">
     <div class="toptitle text-dark row items-center q-py-xs">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
       รายการประวัติตำแหน่ง/เงินเดือน
     </div>
   </div>
+
+  <q-card flat bordered>
+    <q-card-section class="bg-primary text-white">
+      <div class="row items-center q-col-gutter-md">
+        <div class="col-auto">
+          <q-icon name="person" size="lg" />
+        </div>
+        <div class="col">
+          <div class="text-h6">
+            {{ dataProfile?.fullName }}
+          </div>
+          <div class="text-subtitle2">{{ dataProfile?.position }}</div>
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-card-section>
+      <q-list dense separator>
+        <q-item>
+          <q-item-section>
+            <q-item-label
+              ><strong>เลขประจำตัวประชาชน:</strong>
+              {{ dataProfile?.citizenId }}</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section>
+            <q-item-label
+              ><strong>เลขที่ตำแหน่ง:</strong>
+              {{ dataProfile?.posNo }}</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section>
+            <q-item-label
+              ><strong>ตำแหน่งประเภท:</strong>
+              {{ dataProfile?.posType }}</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section>
+            <q-item-label
+              ><strong>ระดับ:</strong> {{ dataProfile?.posLevel }}</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section>
+            <q-item-label
+              ><strong>สังกัด:</strong> {{ dataProfile?.org }}</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-section>
+      <div class="row q-col-gutter-sm justify-center">
+        <div class="col-2">
+          <q-btn
+            outline
+            color="public"
+            label="ยืนยันการแก้ไขสำเร็จ"
+            class="full-width"
+            @click.stop.pervent="onConfirmEdit"
+          />
+        </div>
+        <div class="col-2">
+          <q-btn
+            outline
+            color="public"
+            label="ยืนยันข้อมูลถูกต้อง"
+            class="full-width"
+            @click.stop.pervent="onConfirmDone"
+          />
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-section style="padding: 0px">
+      <q-tabs
+        v-model="tabs"
+        dense
+        align="left"
+        inline-label
+        class="bg-white text-grey"
+        active-color="primary"
+        indicator-color="primary"
+      >
+        <q-tab name="PENDING" label="รายการตำแหน่ง/เงินเดือนที่กำลังแก้ไข" />
+        <q-tab
+          name="CHECKED"
+          label="แสดงรายการตำแหน่ง/เงินเดือนหลังจากแก้ไขแล้ว"
+        />
+      </q-tabs>
+      <q-separator />
+
+      <q-tab-panels v-model="tabs" animated>
+        <q-tab-panel name="PENDING">
+          <Table :tabs="tabs" />
+        </q-tab-panel>
+        <q-tab-panel name="CHECKED">
+          <Table :tabs="tabs" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card-section>
+  </q-card>
 </template>
 
 <style scoped></style>