From f0722248510699fbe5c490e5b9da25883c38ed46 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Thu, 3 Aug 2023 15:53:23 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20component=20=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/information/Assessment.vue     |  981 ++++++++
 src/components/information/Coin.vue           |  840 +++++++
 src/components/information/Discipline.vue     |  943 ++++++++
 src/components/information/Document.vue       |  272 +++
 src/components/information/Education.vue      | 1567 +++++++++++++
 src/components/information/Insignia.vue       | 1344 +++++++++++
 src/components/information/Leave.vue          | 1270 ++++++++++
 src/components/information/Other.vue          |  620 +++++
 src/components/information/Record.vue         |  827 +++++++
 src/components/information/Salary.vue         | 2070 +++++++++++++++++
 src/components/information/SalaryEmployee.vue | 2009 ++++++++++++++++
 .../information/SalaryEmployeeTemp.vue        | 2038 ++++++++++++++++
 src/components/information/Talent.vue         |  684 ++++++
 src/components/information/Train.vue          | 1130 +++++++++
 src/components/information/Work.vue           |  908 ++++++++
 .../components/Receive/receiveDetail.vue      |   64 +-
 16 files changed, 17566 insertions(+), 1 deletion(-)
 create mode 100644 src/components/information/Assessment.vue
 create mode 100644 src/components/information/Coin.vue
 create mode 100644 src/components/information/Discipline.vue
 create mode 100644 src/components/information/Document.vue
 create mode 100644 src/components/information/Education.vue
 create mode 100644 src/components/information/Insignia.vue
 create mode 100644 src/components/information/Leave.vue
 create mode 100644 src/components/information/Other.vue
 create mode 100644 src/components/information/Record.vue
 create mode 100644 src/components/information/Salary.vue
 create mode 100644 src/components/information/SalaryEmployee.vue
 create mode 100644 src/components/information/SalaryEmployeeTemp.vue
 create mode 100644 src/components/information/Talent.vue
 create mode 100644 src/components/information/Train.vue
 create mode 100644 src/components/information/Work.vue

diff --git a/src/components/information/Assessment.vue b/src/components/information/Assessment.vue
new file mode 100644
index 000000000..5d42ad985
--- /dev/null
+++ b/src/components/information/Assessment.vue
@@ -0,0 +1,981 @@
+<!-- card ผลการประเมินการปฏิบัติราชการ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-pa-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ผลการประเมินการปฏิบัติราชการ"
+        icon="mdi-clipboard-text"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'name'" class="table_ellipsis">
+                {{ textPoint(props.row.pointSum) }}
+                {{ textRangePoint(props.row.pointSum) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="ผลการประเมินการปฏิบัติราชการ"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <!-- <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point"
+                :rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
+                hide-bottom-space
+                :label="`${'คะแนน'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div> -->
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSumTotal"
+                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ผลรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSum"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="text-subtitle2 col-12 row items-center">
+              <q-space></q-space>
+              ผลการประเมิน:
+              <div class="text-bold items-center q-px-sm">
+                {{ textPoint(pointSum) }}
+              </div>
+              {{ textRangePoint(pointSum) }}
+            </div>
+            <!-- <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="name"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อแบบประเมิน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div> -->
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'name'" class="table_ellipsis">
+            {{ textPoint(props.row.pointSum) }}
+            {{ textRangePoint(props.row.pointSum) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Assessment";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
+import type { DataOption } from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const name = ref<string>();
+const point1Total = ref<number>();
+const point1 = ref<number>();
+const point2Total = ref<number>();
+const point2 = ref<number>();
+const pointSumTotal = ref<number>();
+const pointSum = ref<number>();
+const date = ref<Date>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.assessment.columns.length == 0
+  ? (visibleColumns.value = [
+      "point1Total",
+      "point1",
+      "point2Total",
+      "point2",
+      "pointSumTotal",
+      "pointSum",
+      "name",
+      "date",
+    ])
+  : (visibleColumns.value = profileData.assessment.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ผลประเมิน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ผลประเมิน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
+  "name",
+  "date",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("assessment", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAssessmentId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            name: e.name,
+            point1Total: e.point1Total,
+            point1: e.point1,
+            point2Total: e.point2Total,
+            point2: e.point2,
+            pointSumTotal: e.pointSumTotal,
+            pointSum: e.pointSum,
+            date: new Date(e.date),
+            createdAt: new Date(e.createdAt),
+            createdFullName: e.createdFullName,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  name.value = row.name;
+  point1Total.value = row.point1Total;
+  point1.value = row.point1;
+  point2Total.value = row.point2Total;
+  point2.value = row.point2;
+  pointSumTotal.value = row.pointSumTotal;
+  pointSum.value = row.pointSum;
+  date.value = row.date;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileAssessmentId(profileId.value), {
+        id: id.value,
+        name: name.value,
+        point1Total: point1Total.value,
+        point1: point1.value,
+        point2Total: point2Total.value,
+        point2: point2.value,
+        pointSumTotal: pointSumTotal.value,
+        pointSum: pointSum.value,
+        date: dateToISO(date.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileAssessmentId(id.value), {
+      id: id.value,
+      name: name.value,
+      point1Total: point1Total.value,
+      point1: point1.value,
+      point2Total: point2Total.value,
+      point2: point2.value,
+      pointSumTotal: pointSumTotal.value,
+      pointSum: pointSum.value,
+      date: dateToISO(date.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileAssessmentId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  name.value = props.row.name;
+  point1Total.value = props.row.point1Total;
+  point1.value = props.row.point1;
+  point2Total.value = props.row.point2Total;
+  point2.value = props.row.point2;
+  pointSumTotal.value = props.row.pointSumTotal;
+  pointSum.value = props.row.pointSum;
+  date.value = props.row.date;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  name.value = "";
+  point1Total.value = 0;
+  point1.value = 0;
+  point2Total.value = 0;
+  point2.value = 0;
+  pointSumTotal.value = 0;
+  pointSum.value = 0;
+  date.value = new Date();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileAssessmentHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          name: e.name,
+          point1Total: e.point1Total,
+          point1: e.point1,
+          point2Total: e.point2Total,
+          point2: e.point2,
+          pointSumTotal: e.pointSumTotal,
+          pointSum: e.pointSum,
+          date: new Date(e.date),
+          createdAt: new Date(e.createdAt),
+          createdFullName: e.createdFullName,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+const textRangePoint = (val: number | undefined) => {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
+  if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
+  if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
+  if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
+  if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
+  else return "";
+};
+
+const textPoint = (val: number | undefined) => {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
+  if (val >= 60 && val <= 69) return "พอใช้";
+  if (val >= 70 && val <= 79) return "ดี";
+  if (val >= 80 && val <= 89) return "ดีมาก";
+  if (val >= 90 && val <= 100) return "ดีเด่น";
+  else return "-";
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Coin.vue b/src/components/information/Coin.vue
new file mode 100644
index 000000000..509123a34
--- /dev/null
+++ b/src/components/information/Coin.vue
@@ -0,0 +1,840 @@
+<!-- card ประกาศเกียรติคุณ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-pa-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :name="
+          profileType == 'employee' ? 'ประกาศลูกจ้างดีเด่น' : 'ประกาศเกียรติคุณ'
+        "
+        icon="mdi-script-text"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'issueDate' || col.name == 'refCommandDate'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :tittle="
+            profileType == 'employee'
+              ? 'ประกาศลูกจ้างดีเด่น'
+              : 'ประกาศเกียรติคุณ'
+          "
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="issueDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(issueDate)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="issuer"
+                :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+                hide-bottom-space
+                :label="`${'ผู้มีอำนาจลงนาม'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'issueDate' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+} from "@/components/information/interface/request/Coin";
+import type { ResponseObject } from "@/components/information/interface/response/Coin";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const issuer = ref<string>();
+const detail = ref<string>();
+const issueDate = ref<Date>(new Date());
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขประกาศเกียรติคุณ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.coined.columns.length == 0
+  ? (visibleColumns.value = [
+      "issuer",
+      "detail",
+      "issueDate",
+      "refCommandNo",
+      "refCommandDate",
+    ])
+  : (visibleColumns.value = profileData.coined.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "ผู้มีอำนาจลงนาม",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "ผู้มีอำนาจลงนาม",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "issuer",
+  "detail",
+  "issueDate",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("coined", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileHonorId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            issuer: e.issuer,
+            detail: e.detail,
+            issueDate: new Date(e.issueDate),
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdAt: new Date(e.createdAt),
+            createdFullName: e.createdFullName,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  issuer.value = row.issuer;
+  detail.value = row.detail;
+  issueDate.value = row.issueDate;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileHonorId(profileId.value), {
+        id: id.value,
+        issuer: issuer.value,
+        detail: detail.value,
+        issueDate: dateToISO(issueDate.value),
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileHonorId(id.value), {
+      id: id.value,
+      issuer: issuer.value,
+      detail: detail.value,
+      issueDate: dateToISO(issueDate.value),
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileHonorId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  issuer.value = props.row.issuer;
+  detail.value = props.row.detail;
+  issueDate.value = props.row.issueDate;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  issuer.value = "";
+  detail.value = "";
+  issueDate.value = new Date();
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  tittleHistory.value =
+    props.profileType == "employee"
+      ? "ประวัติแก้ไขประกาศลูกจ้างดีเด่น"
+      : "ประวัติแก้ไขประกาศเกียรติคุณ";
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileHonorHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          issuer: e.issuer,
+          detail: e.detail,
+          issueDate: new Date(e.issueDate),
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdAt: new Date(e.createdAt),
+          createdFullName: e.createdFullName,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Discipline.vue b/src/components/information/Discipline.vue
new file mode 100644
index 000000000..01bbddae1
--- /dev/null
+++ b/src/components/information/Discipline.vue
@@ -0,0 +1,943 @@
+<!-- card วินัย -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="วินัย"
+        icon="mdi-scale-balance"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'refCommandDate' || col.name == 'date'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="วินัย" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
+                    hide-bottom-space
+                    :label="`${'วัน เดือน ปี'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="level"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
+                hide-bottom-space
+                :label="`${'ระดับการลงโทษทางวินัย'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.levelOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="unStigma"
+                hide-bottom-space
+                :label="`${'ล้างมลทิน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'date' ||
+              col.name == 'refCommandDate' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Discipline";
+import type { ResponseObject } from "@/components/information/interface/response/Discipline";
+import type {
+  DisciplineOps,
+  DataOption,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const level = ref<string>();
+const Ops = ref<DisciplineOps>({
+  levelOptions: [
+    {
+      name: "ภาคทัณฑ์",
+      id: "ภาคทัณฑ์",
+    },
+    {
+      name: "ตัดเงินเดือน",
+      id: "ตัดเงินเดือน",
+    },
+    {
+      name: "ลดขั้นเงินเดือน",
+      id: "ลดขั้นเงินเดือน",
+    },
+    {
+      name: "ปลดออก",
+      id: "ปลดออก",
+    },
+    {
+      name: "ไล่ออก",
+      id: "ไล่ออก",
+    },
+  ],
+});
+const OpsFilter = ref<DisciplineOps>({
+  levelOptions: [
+    {
+      name: "ภาคทัณฑ์",
+      id: "ภาคทัณฑ์",
+    },
+    {
+      name: "ตัดเงินเดือน",
+      id: "ตัดเงินเดือน",
+    },
+    {
+      name: "ลดขั้นเงินเดือน",
+      id: "ลดขั้นเงินเดือน",
+    },
+    {
+      name: "ปลดออก",
+      id: "ปลดออก",
+    },
+    {
+      name: "ไล่ออก",
+      id: "ไล่ออก",
+    },
+  ],
+});
+const detail = ref<string>();
+const unStigma = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const date = ref<Date>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขวินัย"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.discipline.columns.length == 0
+  ? (visibleColumns.value = [
+      "level",
+      "detail",
+      "unStigma",
+      "refCommandNo",
+      "refCommandDate",
+      "date",
+    ])
+  : (visibleColumns.value = profileData.discipline.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับการลงโทษทางวินัย",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับการลงโทษทางวินัย",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "level",
+  "detail",
+  "unStigma",
+  "refCommandNo",
+  "refCommandDate",
+  "date",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("discipline", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const filterSelector = (val: string, update: Function, refData: string) => {
+  switch (refData) {
+    case "levelOptions":
+      update(() => {
+        Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileDisId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            level: e.level,
+            detail: e.detail,
+            unStigma: e.unStigma,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            date: new Date(e.date),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  level.value = row.level;
+  detail.value = row.detail;
+  unStigma.value = row.unStigma;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  date.value = row.date;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileDisId(profileId.value), {
+        id: id.value,
+        level: level.value,
+        detail: detail.value,
+        unStigma: unStigma.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+        date: dateToISO(date.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileDisId(id.value), {
+      id: id.value,
+      level: level.value,
+      detail: detail.value,
+      unStigma: unStigma.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      date: dateToISO(date.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileDisId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  level.value = props.row.level;
+  detail.value = props.row.detail;
+  unStigma.value = props.row.unStigma;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  date.value = props.row.date;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  level.value = "";
+  detail.value = "";
+  unStigma.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+  date.value = new Date();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileDisHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          level: e.level,
+          detail: e.detail,
+          unStigma: e.unStigma,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          date: new Date(e.date),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Document.vue b/src/components/information/Document.vue
new file mode 100644
index 000000000..a73fe0fb3
--- /dev/null
+++ b/src/components/information/Document.vue
@@ -0,0 +1,272 @@
+<template>
+  <q-card flat bordered class="col-12 row q-px-lg q-py-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="เอกสารหลักฐาน"
+      icon="mdi-file-document"
+      :history="false"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :save="uploadData"
+    />
+    <div class="row col-12 q-pt-sm">
+      <q-card bordered flat class="full-width">
+        <q-list separator>
+          <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+            <q-item-section>
+              <q-item-label class="full-width ellipsis">
+                {{ file.fileName }}
+              </q-item-label>
+
+              <q-item-label caption> </q-item-label>
+            </q-item-section>
+            <q-item-section top side>
+              <div class="row col-12">
+                <q-btn
+                  class="gt-xs"
+                  size="12px"
+                  flat
+                  dense
+                  round
+                  color="blue"
+                  icon="mdi-download-outline"
+                  @click="downloadData(file.file)"
+                />
+                <q-btn
+                  class="gt-xs"
+                  size="12px"
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="mdi-delete-outline"
+                  v-show="edit"
+                  @click="deleteData(file.id)"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-input
+        v-if="edit"
+        class="q-mt-sm col-12 q-pb-xs"
+        outlined
+        dense
+        lazy-rules
+        v-model="name"
+        hide-bottom-space
+        :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
+        :label="`${'ชื่อเอกสาร'}`"
+      />
+      <q-uploader
+        v-if="edit"
+        color="gray"
+        type="file"
+        flat
+        @factory="uploadData"
+        ref="uploader"
+        class="full-width"
+        text-color="white"
+        :max-size="10000000"
+        accept=".jpg,.png,.pdf,.csv,.doc"
+        bordered
+        label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+        @added="fileAdd"
+      >
+        <template v-slot:header="scope">
+          <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+            <q-btn
+              v-if="scope.queuedFiles.length > 0"
+              icon="clear_all"
+              @click="scope.removeQueuedFiles"
+              round
+              dense
+              flat
+            >
+              <q-tooltip>ลบทั้งหมด</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="scope.uploadedFiles.length > 0"
+              icon="done_all"
+              @click="scope.removeUploadedFiles"
+              round
+              dense
+              flat
+            >
+              <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+            </q-btn>
+            <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
+            <div class="col">
+              <div class="q-uploader__title">
+                {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
+              </div>
+              <div class="q-uploader__subtitle">
+                {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
+              </div>
+            </div>
+            <q-btn
+              v-if="scope.canAddFiles"
+              type="a"
+              icon="add_box"
+              @click="scope.pickFiles"
+              round
+              dense
+              flat
+            >
+              <q-uploader-add-trigger />
+              <q-tooltip>เลือกไฟล์</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="scope.isUploading"
+              icon="clear"
+              @click="scope.abort"
+              round
+              dense
+              flat
+            >
+              <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+            </q-btn>
+          </div>
+        </template>
+      </q-uploader>
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { onMounted, computed, ref, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import { useDataStore } from "@/stores/data";
+import HeaderTop from "@/components/information/top.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const route = useRoute();
+const { success, messageError } = mixin;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const edit = ref<boolean>(false);
+const uploader = ref<any>();
+const files = ref<any>([]);
+const file = ref<any>([]);
+const name = ref<string>("");
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profilePaperId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        files.value = data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const deleteData = async (id: string) => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profilePaperId(id))
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+    });
+};
+
+const uploadData = async () => {
+  if (profileId.value) {
+    if (file.value.length > 0) {
+      const blob = file.value.slice(0, file.value[0].size);
+      const newFile = new File(blob, name.value, {
+        type: file.value[0].type,
+      });
+      const formData = new FormData();
+      formData.append("avatar", newFile);
+      formData.append("moss", "newFile");
+      console.log(formData);
+      loaderPage(true);
+      await http
+        .post(config.API.profilePaperId(profileId.value), formData)
+        .then((res) => {
+          const data = res.data.result;
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          uploader.value.reset();
+          name.value = "";
+          edit.value = false;
+          emit("update:statusEdit", false);
+          await getData();
+        });
+    } else {
+      // modalError(
+      //   $q,
+      //   "ไม่สามารถอัปโหลดไฟล์ได้",
+      //   "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
+      // );
+      getData();
+    }
+  }
+};
+
+const fileAdd = async (val: any) => {
+  name.value = val[0].name;
+  file.value = val;
+};
+
+const downloadData = async (path: string) => {
+  window.open(path);
+};
+
+const changeBtn = async () => {
+  name.value = "";
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+</script>
diff --git a/src/components/information/Education.vue b/src/components/information/Education.vue
new file mode 100644
index 000000000..5572bc881
--- /dev/null
+++ b/src/components/information/Education.vue
@@ -0,0 +1,1567 @@
+<!-- card ประวัติการศึกษา -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ประวัติการศึกษา"
+        icon="school"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'startDate'" class="table_ellipsis">
+                {{
+                  props.row.isDate == "true"
+                    ? date2Thai(props.row.startDate2)
+                    : col.value + 543
+                }}
+              </div>
+              <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
+                {{
+                  props.row.isDate == "true"
+                    ? date2Thai(props.row.endDate2)
+                    : col.value + 543
+                }}
+              </div>
+              <div v-else-if="col.name == 'finishDate'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
+                {{ col.value ? "ใช่" : "ไม่ใช่" }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="levelId"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
+                hide-bottom-space
+                :label="`${'ระดับการศึกษา'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.levelOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="institute"
+                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
+                hide-bottom-space
+                :label="`${'สถานศึกษา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-card flat bordered class="q-px-sm q-pb-sm borderCard">
+                <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+                  <q-radio
+                    v-model="isDate"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    val="false"
+                    label="ปี"
+                    dense
+                    :disable="!edit"
+                  />
+                  <q-radio
+                    v-model="isDate"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    val="true"
+                    label="วัน/เดือน/ปี"
+                    dense
+                    :disable="!edit"
+                  />
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="startDate + 543"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่เริ่มต้นศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(startDate2)"
+                          :rules="[
+                            (val) =>
+                              !!val ||
+                              `${'กรุณาเลือกวัน เดือน ปี ที่เริ่มต้นศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'วัน เดือน ปี ที่เริ่มต้นศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      v-model="endDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      :min-date="minDate"
+                      :readonly="!edit"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="endDate + 543"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่จบการศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="endDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(endDate2)"
+                          :rules="[
+                            (val) =>
+                              !!val ||
+                              `${'กรุณาเลือกวัน เดือน ปี ที่จบการศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'วัน เดือน ปี ที่จบการศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="finishDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(finishDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่สำเร็จการศึกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="isEducation"
+                hide-bottom-space
+                :label="`${'เป็นวุฒิการศึกษาในตำแหน่ง'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.positionPathOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionPathOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="degree"
+                :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+                hide-bottom-space
+                :label="`${'วุฒิการศึกษา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="field"
+                :rules="[(val) => !!val || `${'กรุณากรอกสาขาวิชา/ทาง'}`]"
+                hide-bottom-space
+                :label="`${'สาขาวิชา/ทาง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="fundName"
+                hide-bottom-space
+                :label="`${'ทุน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="gpa"
+                :rules="[(val) => !!val || `${'กรุณากรอกเกรดเฉลี่ย'}`]"
+                hide-bottom-space
+                :label="`${'เกรดเฉลี่ย'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="country"
+                :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+                hide-bottom-space
+                :label="`${'ประเทศ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="other"
+                hide-bottom-space
+                :label="`${'ข้อมูลการติดต่อ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="duration"
+                hide-bottom-space
+                :label="`${'ระยะเวลา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="durationYear"
+                :rules="[(val) => !!val || `${'กรุณากรอกระยะเวลาหลักสูตร'}`]"
+                hide-bottom-space
+                :label="`${'ระยะเวลาหลักสูตร'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'startDate'" class="table_ellipsis">
+            {{
+              props.row.isDate == true
+                ? date2Thai(props.row.startDate2)
+                : col.value + 543
+            }}
+          </div>
+          <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
+            {{
+              props.row.isDate == true
+                ? date2Thai(props.row.endDate2)
+                : col.value + 543
+            }}
+          </div>
+          <div
+            v-else-if="col.name == 'finishDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
+            {{ col.value ? "ใช่" : "ไม่ใช่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Education";
+import type { ResponseObject } from "@/components/information/interface/response/Education";
+import type { DataOption } from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { EduOps } from "@/components/information/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { success, dateToISO, date2Thai, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const levelId = ref<string>();
+const Ops = ref<EduOps>({
+  levelOptions: [],
+  positionPathOptions: [],
+});
+const OpsFilter = ref<EduOps>({
+  levelOptions: [],
+  positionPathOptions: [],
+});
+const isEducation = ref<boolean>();
+const institute = ref<string>();
+const degree = ref<string>();
+const field = ref<string>();
+const gpa = ref<string>();
+const country = ref<string>();
+const duration = ref<string>();
+const durationYear = ref<number>(0);
+const other = ref<string>();
+const fundName = ref<string>();
+const isDate = ref<string>("true");
+const finishDate = ref<Date>(new Date());
+const startDate = ref<number>(new Date().getFullYear());
+const startDate2 = ref<Date>(new Date());
+const endDate = ref<number>(new Date().getFullYear());
+const endDate2 = ref<Date>(new Date());
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการศึกษา"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.education.columns.length == 0
+  ? (visibleColumns.value = [
+      "level",
+      "institute",
+      "degree",
+      "field",
+      "gpa",
+      "country",
+      "duration",
+      "durationYear",
+      "other",
+      "fundName",
+      "isEducation",
+      "finishDate",
+      "startDate",
+      "endDate",
+    ])
+  : (visibleColumns.value = profileData.education.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับศึกษา",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "institute",
+    align: "left",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "institute",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "ถึง",
+    sortable: true,
+    field: "endDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "finishDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "finishDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isEducation",
+    align: "left",
+    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+    sortable: true,
+    field: "isEducation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "field",
+    align: "left",
+    label: "สาขาวิชา/ทาง",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fundName",
+    align: "left",
+    label: "ทุน",
+    sortable: true,
+    field: "fundName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gpa",
+    align: "left",
+    label: "เกรดเฉลี่ย",
+    sortable: true,
+    field: "gpa",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "country",
+    align: "left",
+    label: "ประเทศ",
+    sortable: true,
+    field: "country",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "other",
+    align: "left",
+    label: "ข้อมูลการติดต่อ",
+    sortable: true,
+    field: "other",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "ระยะเวลา",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "durationYear",
+    align: "left",
+    label: "ระยะเวลาหลักสูตร",
+    sortable: true,
+    field: "durationYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับศึกษา",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "institute",
+    align: "left",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "institute",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "ถึง",
+    sortable: true,
+    field: "endDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "finishDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "finishDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isEducation",
+    align: "left",
+    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+    sortable: true,
+    field: "isEducation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "field",
+    align: "left",
+    label: "สาขาวิชา/ทาง",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fundName",
+    align: "left",
+    label: "ทุน",
+    sortable: true,
+    field: "fundName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gpa",
+    align: "left",
+    label: "เกรดเฉลี่ย",
+    sortable: true,
+    field: "gpa",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "country",
+    align: "left",
+    label: "ประเทศ",
+    sortable: true,
+    field: "country",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "other",
+    align: "left",
+    label: "ข้อมูลการติดต่อ",
+    sortable: true,
+    field: "other",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "ระยะเวลา",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "durationYear",
+    align: "left",
+    label: "ระยะเวลาหลักสูตร",
+    sortable: true,
+    field: "durationYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "level",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "isEducation",
+  "fundName",
+  "finishDate",
+  "startDate",
+  "endDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(startDate, (count, prevCount) => {
+  minDate.value = new Date(`${startDate.value}-01-01`);
+});
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("education", count);
+});
+
+onMounted(async () => {
+  await fetchLevel();
+  await fetchPositionPath();
+  await fetchData();
+});
+
+const fetchLevel = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.educationLevel)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.levelOptions = option;
+      OpsFilter.value.levelOptions = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const fetchPositionPath = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.positionPath)
+    .then((res) => {
+      const data = res.data.result;
+      let option: any = [];
+      //   data.map((r: DataOption) => {
+      option.push({ id: true, name: "ใช่" });
+      option.push({ id: false, name: "ไม่ใช่" });
+      //   });
+      Ops.value.positionPathOptions = option;
+      OpsFilter.value.positionPathOptions = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "levelOptions":
+      update(() => {
+        Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "positionPathOptions":
+      update(() => {
+        Ops.value.positionPathOptions =
+          OpsFilter.value.positionPathOptions.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileEduId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            level: e.educationLevel,
+            levelId: e.educationLevelId,
+            positionPath: e.positionPath,
+            isEducation: e.isEducation,
+            institute: e.institute,
+            degree: e.degree,
+            field: e.field,
+            gpa: e.gpa,
+            country: e.country,
+            duration: e.duration,
+            durationYear: e.durationYear,
+            other: e.other,
+            fundName: e.fundName,
+            isDate: e.isDate == null ? null : e.isDate.toString(),
+            finishDate: new Date(e.finishDate),
+            startDate: new Date(e.startDate).getFullYear(),
+            endDate: new Date(e.endDate).getFullYear(),
+            startDate2: new Date(e.startDate),
+            endDate2: new Date(e.endDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  levelId.value = row.levelId;
+  isEducation.value = row.isEducation;
+  institute.value = row.institute;
+  degree.value = row.degree;
+  field.value = row.field;
+  gpa.value = row.gpa;
+  country.value = row.country;
+  duration.value = row.duration;
+  durationYear.value = row.durationYear;
+  other.value = row.other;
+  fundName.value = row.fundName;
+  finishDate.value = row.finishDate;
+  isDate.value = row.isDate;
+  startDate.value = row.startDate;
+  endDate.value = row.endDate;
+  startDate2.value = row.startDate2;
+  endDate2.value = row.endDate2;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  //   const filter = OpsFilter.value.levelOptions.filter(
+  //     (r: any) => r.id == levelId.value
+  //   );
+  //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
+  //     (r: any) => r.id == isEducation.value
+  //   );
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileEduId(profileId.value), {
+        id: id.value,
+        //   educationLevel: filter[0].name,
+        educationLevelId: levelId.value,
+        isEducation: isEducation.value,
+        institute: institute.value,
+        degree: degree.value,
+        field: field.value,
+        gpa: gpa.value,
+        country: country.value,
+        duration: duration.value,
+        durationYear: durationYear.value,
+        other: other.value,
+        fundName: fundName.value,
+        isDate: isDate.value == "true" ? true : false,
+        finishDate: dateToISO(finishDate.value),
+        startDate:
+          isDate.value == "true"
+            ? dateToISO(startDate2.value)
+            : new Date(`${startDate.value}-01-01`),
+        endDate:
+          isDate.value == "true"
+            ? dateToISO(endDate2.value)
+            : new Date(`${endDate.value}-01-01`),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  //   const filter = OpsFilter.value.levelOptions.filter(
+  //     (r: any) => r.id == levelId.value
+  //   );
+  //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
+  //     (r: any) => r.id == isEducation.value
+  //   );
+  loaderPage(true);
+  await http
+    .put(config.API.profileEduId(id.value), {
+      id: id.value,
+      //   educationLevel: filter[0].name,
+      educationLevelId: levelId.value,
+      isEducation: isEducation.value,
+      institute: institute.value,
+      degree: degree.value,
+      field: field.value,
+      gpa: gpa.value,
+      country: country.value,
+      duration: duration.value,
+      durationYear: durationYear.value,
+      other: other.value,
+      fundName: fundName.value,
+      isDate: isDate.value == "true" ? true : false,
+      finishDate: dateToISO(finishDate.value),
+      startDate:
+        isDate.value == "true"
+          ? dateToISO(startDate2.value)
+          : new Date(`${startDate.value}-01-01`),
+      endDate:
+        isDate.value == "true"
+          ? dateToISO(endDate2.value)
+          : new Date(`${endDate.value}-01-01`),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileEduId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param _props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (_props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = _props.row;
+  rowIndex.value = _props.rowIndex;
+  levelId.value = _props.row.levelId;
+  isEducation.value = _props.row.isEducation;
+  institute.value = _props.row.institute;
+  degree.value = _props.row.degree;
+  field.value = _props.row.field;
+  gpa.value = _props.row.gpa;
+  country.value = _props.row.country;
+  duration.value = _props.row.duration;
+  durationYear.value = _props.row.durationYear;
+  other.value = _props.row.other;
+  fundName.value = _props.row.fundName;
+  finishDate.value = _props.row.finishDate;
+  isDate.value = _props.row.isDate;
+  startDate.value = _props.row.startDate;
+  endDate.value = _props.row.endDate;
+  startDate2.value = _props.row.startDate2;
+  endDate2.value = _props.row.endDate2;
+  id.value = _props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  levelId.value = "";
+  isEducation.value = false;
+  institute.value = "";
+  degree.value = "";
+  field.value = "";
+  gpa.value = "";
+  country.value = "";
+  duration.value = "";
+  durationYear.value = 0;
+  other.value = "";
+  fundName.value = "";
+  isDate.value = "true";
+  finishDate.value = new Date();
+  startDate.value = new Date().getFullYear();
+  endDate.value = new Date().getFullYear();
+  startDate2.value = new Date();
+  endDate2.value = new Date();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileEduHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          level: e.educationLevel,
+          levelId: e.educationLevelId,
+          positionPath: e.positionPath,
+          isEducation: e.isEducation,
+          institute: e.institute,
+          degree: e.degree,
+          field: e.field,
+          gpa: e.gpa,
+          country: e.country,
+          duration: e.duration,
+          durationYear: e.durationYear,
+          other: e.other,
+          fundName: e.fundName,
+          isDate: e.isDate.toString(),
+          finishDate: new Date(e.finishDate),
+          startDate: new Date(e.startDate).getFullYear(),
+          endDate: new Date(e.endDate).getFullYear(),
+          startDate2: new Date(e.startDate2),
+          endDate2: new Date(e.endDate2),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+.borderCard {
+  border: 1px solid #d0d0d0;
+}
+</style>
diff --git a/src/components/information/Insignia.vue b/src/components/information/Insignia.vue
new file mode 100644
index 000000000..25d743441
--- /dev/null
+++ b/src/components/information/Insignia.vue
@@ -0,0 +1,1344 @@
+<!-- card เครื่องราชอิสริยาภรณ์ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="เครื่องราชอิสริยาภรณ์"
+        icon="mdi-medal"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="
+                  col.name == 'receiveDate' ||
+                  col.name == 'dateAnnounce' ||
+                  col.name == 'refCommandDate'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'year'" class="table_ellipsis">
+                {{ col.value + 543 }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="year + 543"
+                    :rules="[
+                      (val:string) =>
+                        !!val ||
+                        `${'กรุณาเลือกปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'ปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="receiveDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(receiveDate)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="insigniaId"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อเครื่องราชฯ'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.insigniaOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(false)"
+                :outlined="false"
+                dense
+                lazy-rules
+                :readonly="true"
+                :borderless="true"
+                v-model="insigniaType"
+                :label="`${'ลำดับชั้น'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="no"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
+                :label="`${'ลำดับที่'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="issue"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
+                :label="`${'ราชกิจจาฯ ฉบับที่'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="volumeNo"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
+                :label="`${'เล่มที่'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="volume"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
+                :label="`${'เล่ม'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="section"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
+                :label="`${'ตอน'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="page"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
+                :label="`${'หน้า'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateAnnounce"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(dateAnnounce)"
+                    :rules="[
+                      (val:string) =>
+                        !!val || `${'กรุณาเลือกวันที่ประกาศในราชกิจจาฯ'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'receiveDate' ||
+              col.name == 'dateAnnounce' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'year'" class="table_ellipsis">
+            {{ col.value + 543 }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+} from "@/components/information/interface/request/Insignia";
+import type { ResponseObject } from "@/components/information/interface/response/Insignia";
+import type {
+  DataOption,
+  DataOptionInsignia,
+  InsigniaOps,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const insigniaId = ref<string>("");
+const Ops = ref<InsigniaOps>({
+  insigniaOptions: [],
+});
+const OpsFilter = ref<InsigniaOps>({
+  insigniaOptions: [],
+});
+const insigniaType = ref<string>();
+const year = ref<number>(0);
+const no = ref<string>();
+const issue = ref<string>();
+const volumeNo = ref<string>();
+const volume = ref<string>();
+const section = ref<string>();
+const page = ref<string>();
+const receiveDate = ref<Date>(new Date());
+const dateAnnounce = ref<Date>(new Date());
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.insignia.columns.length == 0
+  ? (visibleColumns.value = [
+      "insignia",
+      "insigniaType",
+      "year",
+      "no",
+      "issue",
+      "volumeNo",
+      "volume",
+      "section",
+      "page",
+      "receiveDate",
+      "dateAnnounce",
+      "refCommandNo",
+      "refCommandDate",
+    ])
+  : (visibleColumns.value = profileData.insignia.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่ยื่นขอ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "receiveDate",
+    align: "left",
+    label: "ลงวันที่",
+    sortable: true,
+    field: "receiveDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้น",
+    sortable: true,
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับที่",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issue",
+    align: "left",
+    label: "ราชกิจจาฯ ฉบับที่",
+    sortable: true,
+    field: "issue",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volumeNo",
+    align: "left",
+    label: "เล่มที่",
+    sortable: true,
+    field: "volumeNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volume",
+    align: "left",
+    label: "เล่ม",
+    sortable: true,
+    field: "volume",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "section",
+    align: "left",
+    label: "ตอน",
+    sortable: true,
+    field: "section",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้า",
+    sortable: true,
+    field: "page",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAnnounce",
+    align: "left",
+    label: "วันที่ประกาศในราชกิจจาฯ",
+    sortable: true,
+    field: "dateAnnounce",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่ยื่นขอ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "receiveDate",
+    align: "left",
+    label: "ลงวันที่",
+    sortable: true,
+    field: "receiveDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้น",
+    sortable: true,
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับที่",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issue",
+    align: "left",
+    label: "ราชกิจจาฯ ฉบับที่",
+    sortable: true,
+    field: "issue",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volumeNo",
+    align: "left",
+    label: "เล่มที่",
+    sortable: true,
+    field: "volumeNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volume",
+    align: "left",
+    label: "เล่ม",
+    sortable: true,
+    field: "volume",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "section",
+    align: "left",
+    label: "ตอน",
+    sortable: true,
+    field: "section",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้า",
+    sortable: true,
+    field: "page",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAnnounce",
+    align: "left",
+    label: "วันที่ประกาศในราชกิจจาฯ",
+    sortable: true,
+    field: "dateAnnounce",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "insignia",
+  "insigniaType",
+  "year",
+  "no",
+  "issue",
+  "volumeNo",
+  "volume",
+  "section",
+  "page",
+  "receiveDate",
+  "dateAnnounce",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("insignia", count);
+});
+
+watch(insigniaId, (count: string, prevCount: string) => {
+  const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
+    (r: DataOptionInsignia) => r.id == insigniaId.value
+  );
+  if (insigniaTypeFilter[0] != null) {
+    insigniaType.value = insigniaTypeFilter[0].typeName;
+  }
+});
+
+onMounted(async () => {
+  await fetchInsignia();
+  await fetchData();
+});
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "insigniaOptions":
+      update(() => {
+        Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fetchInsignia = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOptionInsignia[] = [];
+      data.map((r: any) => {
+        option.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+          typeName:
+            r.insigniaType == null ? null : r.insigniaType.name.toString(),
+        });
+      });
+      Ops.value.insigniaOptions = option;
+      OpsFilter.value.insigniaOptions = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileInsignId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            insignia: e.insignia,
+            insigniaId: e.insigniaId,
+            insigniaType: e.insigniaType,
+            year: e.year,
+            no: e.no,
+            issue: e.issue,
+            volumeNo: e.volumeNo,
+            volume: e.volume,
+            section: e.section,
+            page: e.page,
+            receiveDate: new Date(e.receiveDate),
+            dateAnnounce: new Date(e.dateAnnounce),
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  insigniaId.value = row.insigniaId;
+  insigniaType.value = row.insigniaType;
+  year.value = row.year;
+  no.value = row.no;
+  issue.value = row.issue;
+  volumeNo.value = row.volumeNo;
+  volume.value = row.volume;
+  section.value = row.section;
+  page.value = row.page;
+  receiveDate.value = row.receiveDate;
+  dateAnnounce.value = row.dateAnnounce;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileInsignId(profileId.value), {
+        id: id.value,
+        insigniaId: insigniaId.value,
+        insigniaType: insigniaType.value,
+        year: year.value,
+        no: no.value,
+        issue: issue.value,
+        volumeNo: volumeNo.value,
+        volume: volume.value,
+        section: section.value,
+        page: page.value,
+        receiveDate: dateToISO(receiveDate.value),
+        dateAnnounce: dateToISO(dateAnnounce.value),
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileInsignId(id.value), {
+      id: id.value,
+      insigniaId: insigniaId.value,
+      insigniaType: insigniaType.value,
+      year: year.value,
+      no: no.value,
+      issue: issue.value,
+      volumeNo: volumeNo.value,
+      volume: volume.value,
+      section: section.value,
+      page: page.value,
+      receiveDate: dateToISO(receiveDate.value),
+      dateAnnounce: dateToISO(dateAnnounce.value),
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileInsignId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  insigniaId.value = props.row.insigniaId;
+  insigniaType.value = props.row.insigniaType;
+  year.value = props.row.year;
+  no.value = props.row.no;
+  issue.value = props.row.issue;
+  volumeNo.value = props.row.volumeNo;
+  volume.value = props.row.volume;
+  section.value = props.row.section;
+  page.value = props.row.page;
+  receiveDate.value = props.row.receiveDate;
+  dateAnnounce.value = props.row.dateAnnounce;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  insigniaId.value = "";
+  insigniaType.value = "";
+  year.value = new Date().getFullYear();
+  no.value = "";
+  issue.value = "";
+  volumeNo.value = "";
+  volume.value = "";
+  section.value = "";
+  page.value = "";
+  receiveDate.value = new Date();
+  dateAnnounce.value = new Date();
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileInsignHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          insignia: e.insignia,
+          insigniaId: e.insigniaId,
+          insigniaType: e.insigniaType,
+          year: e.year,
+          no: e.no,
+          issue: e.issue,
+          volumeNo: e.volumeNo,
+          volume: e.volume,
+          section: e.section,
+          page: e.page,
+          receiveDate: new Date(e.receiveDate),
+          dateAnnounce: new Date(e.dateAnnounce),
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Leave.vue b/src/components/information/Leave.vue
new file mode 100644
index 000000000..b2b5d0b39
--- /dev/null
+++ b/src/components/information/Leave.vue
@@ -0,0 +1,1270 @@
+<!-- card การลา -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :addleave="clickAddLeave"
+        name="การลา"
+        icon="mdi-calendar-account"
+        iconAdd="mdi-calendar-account"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              class="cursor-pointer"
+              @click="selectData(props)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div
+                v-else-if="col.name == 'dateStartLeave'"
+                class="table_ellipsis"
+              >
+                {{
+                  dateThaiRange([
+                    props.row.dateStartLeave,
+                    props.row.dateEndLeave,
+                  ])
+                }}
+              </div>
+              <div v-else-if="col.name == 'status'" class="table_ellipsis">
+                {{ statusLeave(col.value) }}
+                <!-- {{ col.value }} -->
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'numLeave' ||
+                  col.name == 'sumLeave' ||
+                  col.name == 'totalLeave'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Add Edit Leave -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myFormAdd">
+        <DialogHeader tittle="การลา" :close="clickCloseLeave" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="typeLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
+                hide-bottom-space
+                :label="`${'ประเภทการลา'}`"
+                @update:modelValue="clickEditRowType"
+                emit-value
+                map-options
+                option-label="name"
+                :options="typeLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateRange"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+                range
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="dateThaiRange(dateRange)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปีที่ลา'}`]"
+                    hide-bottom-space
+                    :label="`${'วัน เดือน ปีที่ลา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-3 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="numLeave"
+                type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-3 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(false)"
+                :outlined="true"
+                dense
+                lazy-rules
+                :readonly="false"
+                :borderless="false"
+                disable
+                v-model="numUsedLeave"
+                type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลามาแล้ว'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลามาแล้ว'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="statLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
+                hide-bottom-space
+                :label="`${'สถานะการลา'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="statLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reason"
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                hide-bottom-space
+                :label="`${'เหตุผล'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="การลา" :close="clickClose" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <data-table
+              :rows="rowsTotal"
+              :columns="columnsTotal"
+              :filter="filterTotal"
+              :visible-columns="visibleColumnsTotal"
+              v-model:inputfilter="filterTotal"
+              v-model:inputvisible="visibleColumnsTotal"
+              :nornmalData="true"
+            >
+              <template #columns="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div
+                      v-else-if="
+                        col.name == 'numLeave' ||
+                        col.name == 'sumLeave' ||
+                        col.name == 'totalLeave'
+                      "
+                      class="table_ellipsis"
+                    >
+                      {{
+                        col.value == null
+                          ? ""
+                          : col.value.toLocaleString("en-US")
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </data-table>
+          </div>
+        </q-card-section>
+        <q-separator />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'no'">
+            {{ props.rowIndex + 1 }}
+          </div>
+          <div v-else-if="col.name == 'dateStartLeave'" class="table_ellipsis">
+            {{
+              dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
+            }}
+          </div>
+
+          <div
+            v-else-if="
+              col.name == 'numLeave' ||
+              col.name == 'sumLeave' ||
+              col.name == 'totalLeave'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ statusLeave(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  RequestItemsTotalObject,
+  DataProps,
+} from "@/components/information/interface/request/Leave";
+import type {
+  ResponseObject,
+  ResponseTotalObject,
+} from "@/components/information/interface/response/Leave";
+import type {
+  DataOption,
+  DataOptionLeave,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  statusLeave,
+  dialogMessage,
+  dateToISO,
+} = mixin;
+const route = useRoute();
+
+const typeLeave = ref<string>("");
+const typeLeaveOption = ref<DataOptionLeave[]>([]);
+const typeLeaveOptionFilter = ref<DataOptionLeave[]>([]);
+
+const statLeave = ref<string>("");
+const statLeaveOption = ref<DataOption[]>([
+  { id: "approve", name: "ผ่านการอนุมัติ" },
+  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
+  { id: "cancel", name: "ยกเลิก" },
+  { id: "waitting", name: "รออนุมัติ" },
+]);
+const statLeaveOptionFilter = ref<DataOption[]>([
+  { id: "approve", name: "ผ่านการอนุมัติ" },
+  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
+  { id: "cancel", name: "ยกเลิก" },
+  { id: "waitting", name: "รออนุมัติ" },
+]);
+const dateRange = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ลา
+const numLeave = ref<number>(0); //วันที่ ลา
+const numUsedLeave = ref<number>(0); //วันที่ ลา
+const reason = ref<string>(""); //เหตุผล
+const id = ref<string>("");
+// const year = ref<number>(0);
+// const sickDay = ref<number>();
+// const personalDay = ref<number>();
+// const maternityDay = ref<number>();
+// const wifeDay = ref<number>();
+// const restDay = ref<number>();
+// const ordainDay = ref<number>();
+// const absentDay = ref<number>();
+// const studyDay = ref<number>();
+// const agencyDay = ref<number>();
+// const coupleDay = ref<number>();
+// const therapyDay = ref<number>();
+const myFormAdd = ref<any>(); //form data input
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(true); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+
+const modalAdd = ref<boolean>(false); //modal add detail
+// const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขการลา"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filterTotal = ref<string>("");
+const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.leave.columns.length == 0
+  ? (visibleColumns.value = [
+      "no",
+      "typeLeave",
+      "dateStartLeave",
+      "numLeave",
+      "sumLeave",
+      "totalLeave",
+      "status",
+      "reason",
+    ])
+  : (visibleColumns.value = profileData.leave.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStartLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateStartLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numLeave",
+    align: "right",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "numLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "sumLeave",
+    align: "right",
+    label: "ลามาแล้ว",
+    sortable: true,
+    field: "sumLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "right",
+    label: "รวมเป็น",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "right",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStartLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateStartLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numLeave",
+    align: "right",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "numLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "sumLeave",
+    align: "right",
+    label: "ลามาแล้ว",
+    sortable: true,
+    field: "sumLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "right",
+    label: "รวมเป็น",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "no",
+  "typeLeave",
+  "dateStartLeave",
+  "numLeave",
+  "sumLeave",
+  "totalLeave",
+  "status",
+  "reason",
+]);
+const visibleColumnsTotal = ref<String[]>([
+  "typeLeave",
+  "limitLeave",
+  "totalLeave",
+  "remainLeave",
+]);
+const columnsTotal = ref<QTableProps["columns"]>([
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "limitLeave",
+    align: "right",
+    label: "จำนวนวันที่ได้รับ",
+    sortable: true,
+    field: "limitLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "right",
+    label: "จำนวนวันที่ใช้",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remainLeave",
+    align: "right",
+    label: "จำนวนวันที่เหลือ",
+    sortable: true,
+    field: "remainLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("leave", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  rows.value = [];
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileLeaveId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   console.log(data);
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            typeLeave: e.typeLeave,
+            dateStartLeave: new Date(e.dateStartLeave),
+            dateEndLeave: new Date(e.dateEndLeave),
+            numLeave: e.numLeave,
+            sumLeave: e.sumLeave,
+            totalLeave: e.totalLeave,
+            status: e.status,
+            reason: e.reason,
+            typeLeaveId: e.typeLeaveId,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "typeLeaveOption":
+      update(() => {
+        typeLeaveOption.value = typeLeaveOptionFilter.value.filter(
+          (v: DataOptionLeave) =>
+            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    case "statLeaveOption":
+      update(() => {
+        statLeaveOption.value = statLeaveOptionFilter.value.filter(
+          (v: DataOption) =>
+            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileLeaveHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          typeLeave: e.typeLeave,
+          dateStartLeave: new Date(e.dateStartLeave),
+          dateEndLeave: new Date(e.dateEndLeave),
+          numLeave: e.numLeave,
+          sumLeave: e.sumLeave,
+          totalLeave: e.totalLeave,
+          status: e.status,
+          reason: e.reason,
+          typeLeaveId: e.typeLeaveId,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const clickEditRowType = () => {
+  const filter = typeLeaveOptionFilter.value.filter(
+    (v: DataOptionLeave) => v.id == typeLeave.value
+  );
+  if (filter.length > 0) {
+    numUsedLeave.value = filter[0].totalLeave;
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+// /**
+//  * กดดูข้อมูลก่อนหน้า
+//  */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+// /**
+//  * กดดูข้อมูลต่อไป
+//  */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+// /**
+//  * กดดูข้อมูลต่อไป
+//  */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  //   year.value = row.year;
+  //   sickDay.value = row.sickDay;
+  //   personalDay.value = row.personalDay;
+  //   maternityDay.value = row.maternityDay;
+  //   wifeDay.value = row.wifeDay;
+  //   restDay.value = row.restDay;
+  //   ordainDay.value = row.ordainDay;
+  //   absentDay.value = row.absentDay;
+  //   studyDay.value = row.studyDay;
+  //   agencyDay.value = row.agencyDay;
+  //   coupleDay.value = row.coupleDay;
+  //   therapyDay.value = row.therapyDay;
+  id.value = row.id;
+  typeLeave.value = row.typeLeaveId;
+  statLeave.value = row.status;
+  reason.value = row.reason;
+  dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
+  numLeave.value = row.numLeave;
+  numUsedLeave.value = row.sumLeave;
+};
+
+// /**
+//  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+//  */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+// /**
+//  * กดปุ่มแก้ไขใน dialog
+//  */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+const clickAddLeave = async () => {
+  editRow.value = false;
+  edit.value = true;
+  modalAdd.value = true;
+  modalEdit.value = false;
+  typeLeave.value = "";
+  statLeave.value = "";
+  reason.value = "";
+  dateRange.value = [new Date(), new Date()];
+  numLeave.value = 0;
+  numUsedLeave.value = 0;
+  await clickTotal();
+  if (rowsTotal.value.length > 0) {
+    // console.log(rowsTotal.value);
+    let data: DataOptionLeave[] = [];
+    rowsTotal.value.map((e: ResponseTotalObject) => {
+      data.push({
+        id: e.typeLeaveId,
+        name: e.typeLeave,
+        totalLeave: e.totalLeave,
+      });
+    });
+    typeLeaveOption.value = data;
+    typeLeaveOptionFilter.value = data;
+  }
+  //   await addData();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      "info",
+      "ยืนยัน",
+      "public",
+      () => {
+        edit.value = false;
+      },
+      undefined
+    );
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+// /**
+//  * กดบันทึกใน dialog
+//  */
+const clickSave = async () => {
+  myFormAdd.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+// /**
+//  * บันทึกเพิ่มข้อมูล
+//  */
+const saveData = async () => {
+  const sum = Number(numLeave.value) + Number(numUsedLeave.value);
+
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileLeaveId(profileId.value), {
+        dateStartLeave: dateToISO(dateRange.value[0]),
+        dateEndLeave: dateToISO(dateRange.value[1]),
+        numLeave: numLeave.value,
+        sumLeave: numUsedLeave.value,
+        totalLeave: sum,
+        status: statLeave.value,
+        reason: reason.value,
+        typeLeaveId: typeLeave.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modalAdd.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+// /**
+//  * บันทึกแก้ไขข้อมูล
+//  */
+const editData = async () => {
+  const sum = Number(numLeave.value) + Number(numUsedLeave.value);
+
+  loaderPage(true);
+  await http
+    .put(config.API.profileLeaveId(id.value), {
+      dateStartLeave: dateToISO(dateRange.value[0]),
+      dateEndLeave: dateToISO(dateRange.value[1]),
+      numLeave: numLeave.value,
+      sumLeave: numUsedLeave.value,
+      totalLeave: sum,
+      status: statLeave.value,
+      reason: reason.value,
+      typeLeaveId: typeLeave.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modalAdd.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+const deleteData = async () => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profileLeaveId(id.value))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      modalAdd.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+// /**
+//  * ลบลบข้อมูล
+//  */
+const clickDelete = async () => {
+  dialogMessage(
+    $q,
+    `ลบข้อมูล`,
+    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => {
+      await deleteData();
+    },
+    async () => {
+      await fetchData();
+    }
+  );
+};
+const clickCloseLeave = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      "info",
+      "ยืนยัน",
+      "public",
+      () => {
+        modalAdd.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined
+    );
+  } else {
+    modalAdd.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      "info",
+      "ยืนยัน",
+      "primary",
+      () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined
+    );
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+// /**
+//  * กดเลือกข้อมูลที่จะแก้ไข
+//  * @param props ค่า props ใน row ที่เลือก
+//  */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  //   modal.value = true;
+  modalAdd.value = true;
+  edit.value = false;
+  rowIndex.value = props.rowIndex;
+  id.value = props.row.id;
+
+  typeLeave.value = props.row.typeLeaveId;
+  statLeave.value = props.row.status;
+  reason.value = props.row.reason;
+  dateRange.value = [
+    new Date(props.row.dateStartLeave),
+    new Date(props.row.dateEndLeave),
+  ];
+  numLeave.value = props.row.numLeave;
+  numUsedLeave.value = props.row.sumLeave;
+  await clickTotal();
+  if (rowsTotal.value.length > 0) {
+    // console.log(rowsTotal.value);
+    let data: DataOptionLeave[] = [];
+    rowsTotal.value.map((e: ResponseTotalObject) => {
+      data.push({
+        id: e.typeLeaveId,
+        name: e.typeLeave,
+        totalLeave: e.totalLeave,
+      });
+    });
+    typeLeaveOption.value = data;
+    typeLeaveOptionFilter.value = data;
+  }
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = async () => {
+  //   modalEdit.value = false;
+  modal.value = true;
+  //   edit.value = true;
+  await clickTotal();
+};
+
+// /**
+//  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+//  */
+// const clickCancel = async () => {
+//   if (editRow.value == true) {
+//     $q.dialog({
+//       title: `ข้อมูลมีการแก้ไข`,
+//       message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+//       cancel: "ยกเลิก",
+//       ok: "ยืนยัน",
+//       persistent: true,
+//     }).onOk(async () => {
+//       edit.value = false;
+//       await checkRowPage();
+//       await getData();
+//     });
+//   } else {
+//     edit.value = false;
+//     await checkRowPage();
+//   }
+// };
+
+// /**
+//  * เช็คว่ามีการแก้ไขข้อมูล
+//  */
+// const clickEditRow = () => {
+//   editRow.value = true;
+// };
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickTotal = async () => {
+  rowsTotal.value = [];
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileLeaveTotalId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        data.map((e: ResponseTotalObject) => {
+          rowsTotal.value.push({
+            typeLeaveId: e.typeLeaveId,
+            totalLeave: e.totalLeave,
+            limitLeave: e.limitLeave,
+            remainLeave: e.remainLeave,
+            typeLeave: e.typeLeave,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+// /**
+//  * validate input ใน dialog
+//  */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myFormAdd.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+// /**
+//  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+//  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+//  */
+// const getClass = (val: boolean) => {
+//   return {
+//     "full-width inputgreen cursor-pointer": val,
+//     "full-width cursor-pointer": !val,
+//   };
+// };
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+const dateThaiRange = (val: [Date, Date]) => {
+  if (val === null) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Other.vue b/src/components/information/Other.vue
new file mode 100644
index 000000000..da69c2966
--- /dev/null
+++ b/src/components/information/Other.vue
@@ -0,0 +1,620 @@
+<!-- card อื่นๆ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="อื่นๆ"
+        icon="mdi-bookmark"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="อื่นๆ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Other";
+import type { ResponseObject } from "@/components/information/interface/response/Other";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const detail = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขอื่นๆ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.other.columns.length == 0
+  ? (visibleColumns.value = ["date", "detail"])
+  : (visibleColumns.value = profileData.other.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width: 50px;",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width: 50px;",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "detail",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("other", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileOtherId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            detail: e.detail,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  detail.value = row.detail;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileOtherId(profileId.value), {
+        id: id.value,
+        date: date.value,
+        detail: detail.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileOtherId(id.value), {
+      id: id.value,
+      date: date.value,
+      detail: detail.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileOtherId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  detail.value = props.row.detail;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  detail.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileOtherHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: e.date,
+          detail: e.detail,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/Record.vue b/src/components/information/Record.vue
new file mode 100644
index 000000000..05d84fd76
--- /dev/null
+++ b/src/components/information/Record.vue
@@ -0,0 +1,827 @@
+<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+        icon="mdi-calendar-remove"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'date' || col.name == 'refCommandDate'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
+                    hide-bottom-space
+                    :label="`${'วัน เดือน ปี'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'date' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Record";
+import type { ResponseObject } from "@/components/information/interface/response/Record";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const detail = ref<string>();
+const reference = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>(
+  "ประวัติแก้ไขวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+);
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.record.columns.length == 0
+  ? (visibleColumns.value = [
+      "date",
+      "detail",
+      "reference",
+      "refCommandNo",
+      "refCommandDate",
+    ])
+  : (visibleColumns.value = profileData.record.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("record", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value != "") {
+    loaderPage(true);
+    await http
+      .get(config.API.profileNopaidId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            detail: e.detail,
+            reference: e.reference,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  detail.value = row.detail;
+  reference.value = row.reference;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileNopaidId(profileId.value), {
+        id: id.value,
+        date: dateToISO(date.value),
+        detail: detail.value,
+        reference: reference.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileNopaidId(id.value), {
+      id: id.value,
+      date: dateToISO(date.value),
+      detail: detail.value,
+      reference: reference.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileNopaidId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  detail.value = props.row.detail;
+  reference.value = props.row.reference;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  detail.value = "";
+  reference.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileNopaidHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          detail: e.detail,
+          reference: e.reference,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Salary.vue b/src/components/information/Salary.vue
new file mode 100644
index 000000000..766312977
--- /dev/null
+++ b/src/components/information/Salary.vue
@@ -0,0 +1,2070 @@
+<!-- card ตำแหน่ง/เงินเดือน -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/เงินเดือน"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <q-form ref="myForm">
+        <DialogHeader tittle="ตำแหน่ง/เงินเดือน" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="selected"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
+                              (val:string) =>
+                                !!val ||
+                                `${'กรุณาเลือกวัน เดือน ปี'}`,
+                            ]"
+                            :label="`${'วัน เดือน ปี'}`"
+                            hide-bottom-space
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                :style="
+                                  edit
+                                    ? 'color: var(--q-primary)'
+                                    : 'color: var(--q-grey)'
+                                "
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoId"
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
+                        ]"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="posNoOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'1'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'2'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionPathSideId"
+                        :label="`${'ด้าน/สาขา'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'3'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionTypeId"
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`,
+                        ]"
+                        :label="`${'ตำแหน่งประเภท'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionTypeOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'4'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionLineId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
+                        :label="`${'สายงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionLineOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'5'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionLevelId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'6'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionExecutiveId"
+                        :label="`${'ตำแหน่งทางการบริหาร'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionExecutiveOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'7'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionSalaryAmount"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="mouthSalaryAmount"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryClass"
+                        :rules="[
+                          (val:string) =>
+                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
+                        ]"
+                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      >
+                        <template v-slot:append>
+                          <q-btn
+                            color="info"
+                            flat
+                            dense
+                            round
+                            size="14px"
+                            icon="mdi-plus"
+                            @click="templateDetail"
+                            :disable="!edit"
+                          />
+                        </template>
+                      </q-input>
+                    </div> -->
+
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Salary";
+import type { ResponseObject } from "@/components/information/interface/response/Salary";
+import type {
+  DataOption,
+  treeTab,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const amount = ref<number | null>(null);
+const positionSalaryAmount = ref<number | null>(null);
+const mouthSalaryAmount = ref<number | null>(null);
+const ocId = ref<string>();
+const positionId = ref<string>();
+const positionLineId = ref<string>();
+const positionPathSideId = ref<string>();
+const positionTypeId = ref<string>();
+const positionLevelId = ref<string>();
+const positionExecutiveId = ref<string>();
+const positionExecutiveSideId = ref<string>();
+const posNoId = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date>(new Date());
+const ocOptions = ref<DataOption[]>([]);
+const positionOptions = ref<DataOption[]>([]);
+const positionLineOptions = ref<DataOption[]>([]);
+const positionSideOptions = ref<DataOption[]>([]);
+const positionTypeOptions = ref<DataOption[]>([]);
+const positionLevelOptions = ref<DataOption[]>([]);
+const positionExecutiveOptions = ref<DataOption[]>([]);
+const positionExecutiveSideOptions = ref<DataOption[]>([]);
+const posNoOptions = ref<DataOption[]>([]);
+const ocOptionsFilter = ref<DataOption[]>([]);
+const positionOptionsFilter = ref<DataOption[]>([]);
+const positionLineOptionsFilter = ref<DataOption[]>([]);
+const positionSideOptionsFilter = ref<DataOption[]>([]);
+const positionTypeOptionsFilter = ref<DataOption[]>([]);
+const positionLevelOptionsFilter = ref<DataOption[]>([]);
+const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
+const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
+const posNoOptionsFilter = ref<DataOption[]>([]);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const refSelected = ref<DataOption | null>(null);
+const refOptions = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "21",
+    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const refOptionsFilter = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const salaryClass = ref<string>();
+const salaryRef = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขตำแหน่ง/เงินเดือน"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.salary.columns.length == 0
+  ? (visibleColumns.value = [
+      "date",
+      "amount",
+      "positionSalaryAmount",
+      "mouthSalaryAmount",
+      "oc",
+      "position",
+      "posNo",
+      "positionLine",
+      "positionPathSide",
+      "positionType",
+      "positionLevel",
+      "positionExecutive",
+      "positionExecutiveSide",
+      "salaryClass",
+      "salaryRef",
+      "refCommandNo",
+    ])
+  : (visibleColumns.value = profileData.salary.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryClass",
+    align: "left",
+    label: "ตำแหน่ง (รายละเอียด)",
+    sortable: true,
+    field: "salaryClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryClass",
+    align: "left",
+    label: "ตำแหน่ง (รายละเอียด)",
+    sortable: true,
+    field: "salaryClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "position",
+  "posNo",
+  "positionLine",
+  "positionPathSide",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "salaryClass",
+  "salaryRef",
+  "refCommandNo",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("salary", count);
+});
+
+onMounted(async () => {
+  await fetchPosition();
+  await nodeTree();
+  await fetchData();
+});
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "1":
+      update(() => {
+        posNoOptions.value = posNoOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "2":
+      update(() => {
+        positionOptions.value = positionOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "3":
+      update(() => {
+        positionSideOptions.value = positionSideOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "4":
+      update(() => {
+        positionTypeOptions.value = positionTypeOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "5":
+      update(() => {
+        positionLineOptions.value = positionLineOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "6":
+      update(() => {
+        positionLevelOptions.value = positionLevelOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "7":
+      update(() => {
+        positionExecutiveOptions.value =
+          positionExecutiveOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "8":
+      update(() => {
+        refOptions.value = refOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const nodeTree = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * get รายการ ตำแหน่ง
+ */
+const fetchPosition = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.position)
+    .then((res) => {
+      const data = res.data.result;
+      let optionpositionpaths: DataOption[] = [];
+      data.positionPaths.map((r: any) => {
+        optionpositionpaths.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionOptions.value = optionpositionpaths;
+      positionOptionsFilter.value = optionpositionpaths;
+
+      let optionPositionPathSides: DataOption[] = [];
+      data.positionPathSides.map((r: any) => {
+        optionPositionPathSides.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionSideOptions.value = optionPositionPathSides;
+      positionSideOptionsFilter.value = optionPositionPathSides;
+
+      let optionPositionTypes: DataOption[] = [];
+      data.positionTypes.map((r: any) => {
+        optionPositionTypes.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionTypeOptions.value = optionPositionTypes;
+      positionTypeOptionsFilter.value = optionPositionTypes;
+
+      let optionPositionLines: DataOption[] = [];
+      data.positionLines.map((r: any) => {
+        optionPositionLines.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionLineOptions.value = optionPositionLines;
+      positionLineOptionsFilter.value = optionPositionLines;
+
+      let optionPositionExecutives: DataOption[] = [];
+      data.positionExecutives.map((r: any) => {
+        optionPositionExecutives.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionExecutiveOptions.value = optionPositionExecutives;
+      positionExecutiveOptionsFilter.value = optionPositionExecutives;
+
+      let optionPositionExecutiveSides: DataOption[] = [];
+      data.positionExecutiveSides.map((r: any) => {
+        optionPositionExecutiveSides.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionExecutiveSideOptions.value = optionPositionExecutiveSides;
+      positionExecutiveSideOptionsFilter.value = optionPositionExecutiveSides;
+
+      let optionPositionLevels: DataOption[] = [];
+      data.positionLevels.map((r: any) => {
+        optionPositionLevels.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionLevelOptions.value = optionPositionLevels;
+      positionLevelOptionsFilter.value = optionPositionLevels;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileSalaryId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            amount: e.amount,
+            positionSalaryAmount: e.positionSalaryAmount,
+            mouthSalaryAmount: e.mouthSalaryAmount,
+            oc: e.oc,
+            ocId: e.ocId,
+            position: e.position,
+            positionId: e.positionId,
+            posNo: e.posNo,
+            posNoId: e.posNoId,
+            positionLine: e.positionLine,
+            positionLineId: e.positionLineId,
+            positionPathSide: e.positionPathSide,
+            positionPathSideId: e.positionPathSideId,
+            positionType: e.positionType,
+            positionTypeId: e.positionTypeId,
+            positionLevel: e.positionLevel,
+            positionLevelId: e.positionLevelId,
+            positionExecutive: e.positionExecutive,
+            positionExecutiveId: e.positionExecutiveId,
+            positionExecutiveSide: e.positionExecutiveSide,
+            positionExecutiveSideId: e.positionExecutiveSideId,
+            salaryClass: e.salaryClass,
+            salaryRef: e.salaryRef,
+            refCommandNo: e.refCommandNo,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const onSelected = async (id: string) => {
+  await fetchPositionNumber(id);
+};
+
+const fetchOrganization = async (id: string) => {
+  if (selected.value != "") {
+    loaderPage(true);
+    await http
+      .get(config.API.organizationName(id))
+      .then((res) => {
+        let data = res.data.result;
+        ocId.value = data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchPositionNumber = async (id: string) => {
+  loaderPage(true);
+  await http
+    .get(config.API.getPositionNumberIdByOcId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      posNoOptions.value = option;
+      posNoOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = async () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  amount.value = row.amount;
+  positionSalaryAmount.value = row.positionSalaryAmount;
+  mouthSalaryAmount.value = row.mouthSalaryAmount;
+  await onSelected(row.ocId);
+  selected.value = row.ocId;
+  positionId.value = row.positionId;
+  posNoId.value = row.posNoId;
+  positionLineId.value = row.positionLineId;
+  positionPathSideId.value = row.positionPathSideId;
+  positionTypeId.value = row.positionTypeId;
+  positionLevelId.value = row.positionLevelId;
+  positionExecutiveId.value = row.positionExecutiveId;
+  positionExecutiveSideId.value = row.positionExecutiveSideId;
+  salaryClass.value = row.salaryClass;
+  salaryRef.value = row.salaryRef;
+  refCommandNo.value = row.refCommandNo;
+  id.value = row.id;
+  await fetchPositionNumber(row.ocId);
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * gen ตำแหน่ง (รายละเอียด)
+ */
+const templateDetail = async () => {
+  await fetchOrganization(selected.value);
+  salaryClass.value = "";
+  if (ocId.value != "") {
+    salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
+  }
+
+  const positionF = positionOptions.value.filter(
+    (r: DataOption) => r.id == positionId.value
+  );
+  if (positionF.length > 0) {
+    salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
+  }
+
+  const posNoF = posNoOptions.value.filter(
+    (r: DataOption) => r.id == posNoId.value
+  );
+  if (posNoF.length > 0) {
+    salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
+  }
+
+  const positionLineF = positionLineOptions.value.filter(
+    (r: DataOption) => r.id == positionLineId.value
+  );
+  if (positionLineF.length > 0) {
+    salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
+  }
+
+  const positionPathSideF = positionSideOptions.value.filter(
+    (r: DataOption) => r.id == positionPathSideId.value
+  );
+  if (positionPathSideF.length > 0) {
+    salaryClass.value =
+      salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
+  }
+
+  const positionTypeF = positionTypeOptions.value.filter(
+    (r: DataOption) => r.id == positionTypeId.value
+  );
+  if (positionTypeF.length > 0) {
+    salaryClass.value =
+      salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
+  }
+
+  const positionLevelF = positionLevelOptions.value.filter(
+    (r: DataOption) => r.id == positionLevelId.value
+  );
+  if (positionLevelF.length > 0) {
+    salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
+  }
+
+  const positionExecutiveF = positionExecutiveOptions.value.filter(
+    (r: DataOption) => r.id == positionExecutiveId.value
+  );
+  if (positionExecutiveF.length > 0) {
+    salaryClass.value =
+      salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
+  }
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileSalaryId(profileId.value), {
+        date: dateToISO(date.value),
+        amount: amount.value,
+        positionSalaryAmount: positionSalaryAmount.value,
+        mouthSalaryAmount: mouthSalaryAmount.value,
+        ocId: selected.value,
+        positionId: positionId.value,
+        posNoId: posNoId.value,
+        positionLineId: positionLineId.value,
+        positionPathSideId: positionPathSideId.value,
+        positionTypeId: positionTypeId.value,
+        positionLevelId: positionLevelId.value,
+        positionExecutiveId: positionExecutiveId.value,
+        positionExecutiveSideId: positionExecutiveSideId.value,
+        salaryClass: salaryClass.value,
+        salaryRef: salaryRef.value,
+        refCommandNo: refCommandNo.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileSalaryId(id.value), {
+      date: dateToISO(date.value),
+      amount: amount.value,
+      positionSalaryAmount: positionSalaryAmount.value,
+      mouthSalaryAmount: mouthSalaryAmount.value,
+      ocId: selected.value,
+      positionId: positionId.value,
+      posNoId: posNoId.value,
+      positionLineId: positionLineId.value,
+      positionPathSideId: positionPathSideId.value,
+      positionTypeId: positionTypeId.value,
+      positionLevelId: positionLevelId.value,
+      positionExecutiveId: positionExecutiveId.value,
+      positionExecutiveSideId: positionExecutiveSideId.value,
+      salaryClass: salaryClass.value,
+      salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileSalaryId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  amount.value = props.row.amount;
+  positionSalaryAmount.value = props.row.positionSalaryAmount;
+  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+  await onSelected(props.row.ocId);
+  selected.value = props.row.ocId;
+  positionId.value = props.row.positionId;
+  posNoId.value = props.row.posNoId;
+  positionLineId.value = props.row.positionLineId;
+  positionPathSideId.value = props.row.positionPathSideId;
+  positionTypeId.value = props.row.positionTypeId;
+  positionLevelId.value = props.row.positionLevelId;
+  positionExecutiveId.value = props.row.positionExecutiveId;
+  positionExecutiveSideId.value = props.row.positionExecutiveSideId;
+  salaryClass.value = props.row.salaryClass;
+  salaryRef.value = props.row.salaryRef;
+  refCommandNo.value = props.row.refCommandNo;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  selected.value = "";
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  date.value = new Date();
+  amount.value = null;
+  positionSalaryAmount.value = null;
+  mouthSalaryAmount.value = null;
+  ocId.value = "";
+  positionId.value = "";
+  posNoId.value = "";
+  positionLineId.value = "";
+  positionPathSideId.value = "";
+  positionTypeId.value = "";
+  positionLevelId.value = "";
+  positionExecutiveId.value = "";
+  positionExecutiveSideId.value = "";
+  salaryClass.value = "";
+  refSelected.value = null;
+  salaryRef.value = "";
+  refCommandNo.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRowRef = () => {
+  editRow.value = true;
+  salaryRef.value = refSelected.value?.name;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileSalaryHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          amount: e.amount,
+          positionSalaryAmount: e.positionSalaryAmount,
+          mouthSalaryAmount: e.mouthSalaryAmount,
+          oc: e.oc,
+          ocId: e.ocId,
+          position: e.position,
+          positionId: e.positionId,
+          posNo: e.posNo,
+          posNoId: e.posNoId,
+          positionLine: e.positionLine,
+          positionLineId: e.positionLineId,
+          positionPathSide: e.positionPathSide,
+          positionPathSideId: e.positionPathSideId,
+          positionType: e.positionType,
+          positionTypeId: e.positionTypeId,
+          positionLevel: e.positionLevel,
+          positionLevelId: e.positionLevelId,
+          positionExecutive: e.positionExecutive,
+          positionExecutiveId: e.positionExecutiveId,
+          positionExecutiveSide: e.positionExecutiveSide,
+          positionExecutiveSideId: e.positionExecutiveSideId,
+          salaryClass: e.salaryClass,
+          salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/SalaryEmployee.vue b/src/components/information/SalaryEmployee.vue
new file mode 100644
index 000000000..3e013336b
--- /dev/null
+++ b/src/components/information/SalaryEmployee.vue
@@ -0,0 +1,2009 @@
+<!-- card ตำแหน่ง/ค่าจ้าง -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/ค่าจ้าง"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 60vw; max-width: 80vw">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="agencyId"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <q-card class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 60vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
+                                (val:string) =>
+                                  !!val ||
+                                  `${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
+                              ]"
+                            :label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
+                            hide-bottom-space
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                :style="
+                                  edit
+                                    ? 'color: var(--q-primary)'
+                                    : 'color: var(--q-grey)'
+                                "
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <!-- <selector
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="posNoId"
+                      :rules="[
+                            (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
+                          ]"
+                      :label="`${'ตำแหน่งเลขที่'}`"
+                      @update:modelValue="clickEditRow"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="posNoOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'posNo'
+                        ) "
+                    /> -->
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoEmployee"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionSideId"
+                        :label="`${'ด้านของตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeLevelId"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeGroupId"
+                        :label="`${'กลุ่มงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeGroupOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
+                        ) "
+                      />
+                    </div>
+                    <!-- <div class="col-xs-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="agencyId"
+                        :label="`${'สังกัด'}`"
+                        @update:model-value="(value:string) => selectAgency(value)"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="agencyOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
+                        ) "
+                      />
+                    </div> -->
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :label="`${'ค่าจ้าง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="positionSalaryAmount"
+                      :label="`${'เงินประจำตำแหน่ง'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="mouthSalaryAmount"
+                      :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div> -->
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="salaryClass"
+                      :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                      @update:modelValue="clickEditRow"
+                      hide-bottom-space
+                      autogrow
+                    >
+                    </q-input>
+                  </div> -->
+
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="refCommandDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(refCommandDate)"
+                          :rules="[
+                      (val:string) =>
+                        !!val || `${'กรุณาเลือกเลขที่คำสั่งลงวันที่'}`,
+                    ]"
+                          hide-bottom-space
+                          :label="`${'เลขที่คำสั่งลงวันที่'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div> -->
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsEmployee,
+  DataPropsEmployee,
+} from "@/components/information/interface/request/Salary";
+import type { ResponseObjectEmployee } from "@/components/information/interface/response/Salary";
+import type {
+  DataOption,
+  treeTab,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const amount = ref<number | null>(null);
+const positionSalaryAmount = ref<number | null>(null);
+const mouthSalaryAmount = ref<number | null>(null);
+const search = ref<string>("");
+const refCommandNo = ref<any>();
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+
+const posNoId = ref<string>("");
+const posNoEmployee = ref<string>("");
+const posNoOptions = ref<DataOption[]>([]);
+const posNoOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionId = ref<string>("");
+const employeePositionOptions = ref<DataOption[]>([]);
+const employeePositionOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionSideId = ref<string>("");
+const employeePositionSideOptions = ref<DataOption[]>([]);
+const employeePositionSideOptionsFilter = ref<DataOption[]>([]);
+
+const employeeLevelId = ref<string>("");
+const employeeLevelOptions = ref<DataOption[]>([]);
+const employeeLevelOptionsFilter = ref<DataOption[]>([]);
+
+const employeeGroupId = ref<string>("");
+const employeeGroupOptions = ref<DataOption[]>([]);
+const employeeGroupOptionsFilter = ref<DataOption[]>([]);
+
+const agencyId = ref<string>("");
+const agencyOptions = ref<DataOption[]>([]);
+const agencyOptionsFilter = ref<DataOption[]>([]);
+
+const refSelected = ref<DataOption | null>(null);
+const refOptions = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "21",
+    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const refOptionsFilter = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const salaryClass = ref<string>();
+const salaryRef = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<ResponseObjectEmployee>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<ResponseObjectEmployee[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขตำแหน่ง/ค่าจ้าง"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<ResponseObjectEmployee[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.salary.columns.length == 0
+  ? (visibleColumns.value = [
+      "date",
+      "amount",
+      "positionSalaryAmount",
+      "mouthSalaryAmount",
+      "oc",
+      "positionEmployeePosition",
+      "posNo",
+      "positionEmployeePositionSide",
+      "positionEmployeeLevel",
+      "positionEmployeeGroup",
+      //   "salaryClass",
+      "salaryRef",
+      "refCommandNo",
+    ])
+  : (visibleColumns.value = profileData.salary.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionEmployeeLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionEmployeeLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "positionEmployeePosition",
+  "posNo",
+  "positionEmployeePositionSide",
+  "positionEmployeeLevel",
+  "positionEmployeeGroup",
+  //   "salaryClass",
+  "salaryRef",
+  "refCommandNo",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("salary", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+  await fetchDataSelector();
+});
+
+const fetchDataSelector = async () => {
+  loaderPage(true);
+  await fetchEmployeePosition();
+  await fetchEmployeePositionSide();
+  await fetchEmployeeLevel();
+  await fetchEmployeeGroup();
+  await fetchAgency();
+  await nodeTree();
+  loaderPage(false);
+};
+// ตำแหน่ง
+const fetchEmployeePosition = async () => {
+  await http
+    .get(config.API.positionEmployeePosition)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeePositionOptions.value = option;
+      employeePositionOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// ด้านของตำแหน่ง
+const fetchEmployeePositionSide = async () => {
+  await http
+    .get(config.API.positionEmployeePositionSide)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeePositionSideOptions.value = option;
+      employeePositionSideOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// ระดับ
+const fetchEmployeeLevel = async () => {
+  await http
+    .get(config.API.positionEmployeeLevel)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeLevelOptions.value = option;
+      employeeLevelOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// กลุ่มงาน
+const fetchEmployeeGroup = async () => {
+  await http
+    .get(config.API.positionEmployeeGroup)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeGroupOptions.value = option;
+      employeeGroupOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+// สังกัด
+const fetchAgency = async () => {
+  await http
+    .get(config.API.organizationRoot)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.label.toString() });
+      });
+
+      agencyOptions.value = option;
+      agencyOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const nodeTree = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const selectAgency = (val: string) => {
+  fetchPositionNumber(val);
+  clickEditRow();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "posNo":
+      update(() => {
+        posNoOptions.value = posNoOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeePosition":
+      update(() => {
+        employeePositionOptions.value =
+          employeePositionOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeePositionSide":
+      update(() => {
+        employeePositionSideOptions.value =
+          employeePositionSideOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeeLevel":
+      update(() => {
+        employeeLevelOptions.value = employeeLevelOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "employeeGroup":
+      update(() => {
+        employeeGroupOptions.value = employeeGroupOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "agency":
+      update(() => {
+        agencyOptions.value = agencyOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "ref":
+      update(() => {
+        refOptions.value = refOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileSalaryEmployeeId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   console.log(data);
+        rows.value = [];
+        data.map((e: ResponseObjectEmployee) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            amount: e.amount,
+            positionSalaryAmount: e.positionSalaryAmount,
+            mouthSalaryAmount: e.mouthSalaryAmount,
+            oc: e.oc,
+            ocId: e.ocId,
+            posNo: e.posNo,
+            posNoId: e.posNoId,
+            posNoEmployee: e.posNoEmployee,
+            positionEmployeeGroup: e.positionEmployeeGroup,
+            positionEmployeeGroupId: e.positionEmployeeGroupId,
+            positionEmployeeLevel: e.positionEmployeeLevel,
+            positionEmployeeLevelId: e.positionEmployeeLevelId,
+            positionEmployeePosition: e.positionEmployeePosition,
+            positionEmployeePositionId: e.positionEmployeePositionId,
+            positionEmployeePositionSide: e.positionEmployeePositionSide,
+            positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+            salaryClass: e.salaryClass,
+            salaryRef: e.salaryRef,
+            refCommandNo: e.refCommandNo,
+            //   refCommandDate: new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchPositionNumber = async (id: string) => {
+  //   loaderPage(true);
+  if (id == null || id == "") return;
+  await http
+    .get(config.API.getPositionNumberIdByOcId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      posNoOptions.value = option;
+      posNoOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = async () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  amount.value = row.amount;
+  positionSalaryAmount.value = row.positionSalaryAmount;
+  mouthSalaryAmount.value = row.mouthSalaryAmount;
+  //   positionId.value = row.positionId;
+  //   posNoId.value = row.posNoId;
+  //   positionLineId.value = row.positionLineId;
+  //   positionPathSideId.value = row.positionPathSideId;
+  //   positionTypeId.value = row.positionTypeId;
+  //   positionLevelId.value = row.positionLevelId;
+  //   positionExecutiveId.value = row.positionExecutiveId;
+  //   positionExecutiveSideId.value = row.positionExecutiveSideId;
+  posNoId.value = row.posNoId ?? "";
+  posNoEmployee.value = row.posNoEmployee ?? "";
+  employeePositionId.value = row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = row.positionEmployeeGroupId ?? "";
+  agencyId.value = row.ocId ?? "";
+
+  salaryClass.value = row.salaryClass ?? "";
+  salaryRef.value = row.salaryRef ?? "";
+  refCommandNo.value = row.refCommandNo ?? "";
+  id.value = row.id;
+  await fetchPositionNumber(row.ocId ?? "");
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  //   console.log(rowIndex.value);
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * gen ตำแหน่ง (รายละเอียด)
+ */
+const templateDetail = async () => {
+  //   salaryClass.value = "";
+  //   if (ocId.value != "") {
+  //     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
+  //   }
+  //   const positionF = positionOptions.value.filter(
+  //     (r: DataOption) => r.id == positionId.value
+  //   );
+  //   if (positionF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
+  //   }
+  //   const posNoF = posNoOptions.value.filter(
+  //     (r: DataOption) => r.id == posNoId.value
+  //   );
+  //   if (posNoF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
+  //   }
+  //   const positionLineF = positionLineOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLineId.value
+  //   );
+  //   if (positionLineF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
+  //   }
+  //   const positionPathSideF = positionSideOptions.value.filter(
+  //     (r: DataOption) => r.id == positionPathSideId.value
+  //   );
+  //   if (positionPathSideF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
+  //   }
+  //   const positionTypeF = positionTypeOptions.value.filter(
+  //     (r: DataOption) => r.id == positionTypeId.value
+  //   );
+  //   if (positionTypeF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
+  //   }
+  //   const positionLevelF = positionLevelOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLevelId.value
+  //   );
+  //   if (positionLevelF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
+  //   }
+  //   const positionExecutiveF = positionExecutiveOptions.value.filter(
+  //     (r: DataOption) => r.id == positionExecutiveId.value
+  //   );
+  //   if (positionExecutiveF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
+  //   }
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileSalaryEmployeeId(profileId.value), {
+        amount: amount.value,
+        date: dateToISO(date.value),
+        positionSalaryAmount: positionSalaryAmount.value,
+        mouthSalaryAmount: mouthSalaryAmount.value,
+        ocId: agencyId.value,
+        //   posNoId: posNoId.value,
+        posNoEmployee: posNoEmployee.value,
+        positionEmployeeGroupId: employeeGroupId.value,
+        positionEmployeeLevelId: employeeLevelId.value,
+        positionEmployeePositionId: employeePositionId.value,
+        positionEmployeePositionSideId: employeePositionSideId.value,
+        salaryClass: salaryClass.value,
+        salaryRef: salaryRef.value,
+        refCommandNo: refCommandNo.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileSalaryEmployeeId(id.value), {
+      amount: amount.value,
+      date: dateToISO(date.value),
+      positionSalaryAmount: positionSalaryAmount.value,
+      mouthSalaryAmount: mouthSalaryAmount.value,
+      ocId: agencyId.value,
+      //   posNoId: posNoId.value,
+      posNoEmployee: posNoEmployee.value,
+      positionEmployeeGroupId: employeeGroupId.value,
+      positionEmployeeLevelId: employeeLevelId.value,
+      positionEmployeePositionId: employeePositionId.value,
+      positionEmployeePositionSideId: employeePositionSideId.value,
+      salaryClass: salaryClass.value,
+      salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบข้อมูล
+ */
+const fetchDataDelete = async () => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profileSalaryId(id.value))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ *  dialog ลบข้อมูล
+ */
+const clickDelete = async () => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await fetchDataDelete(),
+    async () => await fetchData(),
+    false
+  );
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined,
+      false
+    );
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataPropsEmployee) => {
+  //   console.log(props.row);
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  amount.value = props.row.amount;
+  positionSalaryAmount.value = props.row.positionSalaryAmount;
+  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+
+  posNoId.value = props.row.posNoId ?? "";
+  posNoEmployee.value = props.row.posNoEmployee ?? "";
+  employeePositionId.value = props.row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = props.row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
+  agencyId.value = props.row.ocId ?? "";
+
+  //   refSelected.value = props.row
+  salaryClass.value = props.row.salaryClass ?? "";
+  salaryRef.value = props.row.salaryRef ?? "";
+  refCommandNo.value = props.row.refCommandNo ?? "";
+  id.value = props.row.id;
+  await fetchPositionNumber(props.row.ocId ?? "");
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  amount.value = null;
+  positionSalaryAmount.value = null;
+  mouthSalaryAmount.value = null;
+
+  posNoId.value = "";
+  posNoEmployee.value = "";
+  employeePositionId.value = "";
+  employeePositionSideId.value = "";
+  employeeLevelId.value = "";
+  employeeGroupId.value = "";
+  agencyId.value = "";
+  agencyOptions.value = [];
+
+  salaryClass.value = "";
+  refSelected.value = null;
+  salaryRef.value = "";
+  refCommandNo.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        edit.value = false;
+        await checkRowPage();
+        await getData();
+      },
+      undefined,
+      false
+    );
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+const onSelected = async (id: string) => {
+  await fetchPositionNumber(id);
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRowRef = () => {
+  editRow.value = true;
+  salaryRef.value = refSelected.value?.name;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsEmployee) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileSalaryHisId(row.id))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log("clickHistory", data);
+      rowsHistory.value = [];
+      data.map((e: ResponseObjectEmployee) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          amount: e.amount,
+          positionSalaryAmount: e.positionSalaryAmount,
+          mouthSalaryAmount: e.mouthSalaryAmount,
+          oc: e.oc,
+          ocId: e.ocId,
+          posNo: e.posNo,
+          posNoId: e.posNoId,
+          posNoEmployee: e.posNoEmployee,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          positionEmployeeGroupId: e.positionEmployeeGroupId,
+          positionEmployeeLevel: e.positionEmployeeLevel,
+          positionEmployeeLevelId: e.positionEmployeeLevelId,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionId: e.positionEmployeePositionId,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+          salaryClass: e.salaryClass,
+          salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/SalaryEmployeeTemp.vue b/src/components/information/SalaryEmployeeTemp.vue
new file mode 100644
index 000000000..de93b4ee8
--- /dev/null
+++ b/src/components/information/SalaryEmployeeTemp.vue
@@ -0,0 +1,2038 @@
+<!-- card ตำแหน่ง/ค่าจ้าง -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/ค่าจ้าง"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 60vw; max-width: 80vw">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="agencyId"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <q-card class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 60vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
+                                (val:string) =>
+                                  !!val ||
+                                  `${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
+                              ]"
+                            :label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
+                            hide-bottom-space
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                :style="
+                                  edit
+                                    ? 'color: var(--q-primary)'
+                                    : 'color: var(--q-grey)'
+                                "
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoEmployee"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      />
+                    </div> -->
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionSideId"
+                        :label="`${'ด้านของตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
+                        ) "
+                      />
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeLevelId"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
+                        ) "
+                      />
+                    </div> -->
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeGroupId"
+                        :label="`${'กลุ่มงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeGroupOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
+                        ) "
+                      />
+                    </div>
+                    <!-- <div class="col-xs-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="agencyId"
+                        :label="`${'สังกัด'}`"
+                        @update:model-value="(value:string) => selectAgency(value)"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="agencyOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
+                        ) "
+                      />
+                    </div> -->
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :label="`${'ค่าจ้าง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="positionSalaryAmount"
+                      :label="`${'เงินประจำตำแหน่ง'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="mouthSalaryAmount"
+                      :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div> -->
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="salaryClass"
+                      :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                      @update:modelValue="clickEditRow"
+                      hide-bottom-space
+                      autogrow
+                    >
+                    </q-input>
+                  </div> -->
+
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="refCommandDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(refCommandDate)"
+                          :rules="[
+                      (val:string) =>
+                        !!val || `${'กรุณาเลือกเลขที่คำสั่งลงวันที่'}`,
+                    ]"
+                          hide-bottom-space
+                          :label="`${'เลขที่คำสั่งลงวันที่'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div> -->
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsEmployee,
+  DataPropsEmployee,
+} from "@/components/information/interface/request/Salary";
+import type { ResponseObjectEmployee } from "@/components/information/interface/response/Salary";
+import type {
+  DataOption,
+  treeTab,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const amount = ref<number | null>(null);
+const positionSalaryAmount = ref<number | null>(null);
+const mouthSalaryAmount = ref<number | null>(null);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const refCommandNo = ref<any>();
+
+const posNoId = ref<string>("");
+const posNoEmployee = ref<string>("");
+const posNoOptions = ref<DataOption[]>([]);
+const posNoOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionId = ref<string>("");
+const employeePositionOptions = ref<DataOption[]>([]);
+const employeePositionOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionSideId = ref<string>("");
+const employeePositionSideOptions = ref<DataOption[]>([]);
+const employeePositionSideOptionsFilter = ref<DataOption[]>([]);
+
+const employeeLevelId = ref<string>("");
+const employeeLevelOptions = ref<DataOption[]>([]);
+const employeeLevelOptionsFilter = ref<DataOption[]>([]);
+
+const employeeGroupId = ref<string>("");
+const employeeGroupOptions = ref<DataOption[]>([]);
+const employeeGroupOptionsFilter = ref<DataOption[]>([]);
+
+const agencyId = ref<string>("");
+const agencyOptions = ref<DataOption[]>([]);
+const agencyOptionsFilter = ref<DataOption[]>([]);
+
+const refSelected = ref<DataOption | null>(null);
+const refOptions = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "21",
+    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const refOptionsFilter = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const salaryClass = ref<string>();
+const salaryRef = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<ResponseObjectEmployee>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<ResponseObjectEmployee[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขตำแหน่ง/ค่าจ้าง"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<ResponseObjectEmployee[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.salary.columns.length == 0
+  ? (visibleColumns.value = [
+      "date",
+      "amount",
+      "positionSalaryAmount",
+      "mouthSalaryAmount",
+      "oc",
+      "positionEmployeePosition",
+      "posNo",
+      "positionEmployeePositionSide",
+      "positionEmployeeLevel",
+      "positionEmployeeGroup",
+      //   "salaryClass",
+      "salaryRef",
+      "refCommandNo",
+    ])
+  : (visibleColumns.value = profileData.salary.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "posNo",
+  //     align: "left",
+  //     label: "ตำแหน่งเลขที่",
+  //     sortable: true,
+  //     field: "posNo",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionEmployeeLevel",
+  //     align: "left",
+  //     label: "ระดับ",
+  //     sortable: true,
+  //     field: "positionEmployeeLevel",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "posNo",
+  //     align: "left",
+  //     label: "ตำแหน่งเลขที่",
+  //     sortable: true,
+  //     field: "posNo",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionEmployeeLevel",
+  //     align: "left",
+  //     label: "ระดับ",
+  //     sortable: true,
+  //     field: "positionEmployeeLevel",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "positionEmployeePosition",
+  "posNo",
+  "positionEmployeePositionSide",
+  "positionEmployeeLevel",
+  "positionEmployeeGroup",
+  //   "salaryClass",
+  "salaryRef",
+  "refCommandNo",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("salary", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+  await fetchDataSelector();
+});
+
+const fetchDataSelector = async () => {
+  loaderPage(true);
+  await fetchEmployeePosition();
+  await fetchEmployeePositionSide();
+  await fetchEmployeeLevel();
+  await fetchEmployeeGroup();
+  await fetchAgency();
+  await nodeTree();
+  loaderPage(false);
+};
+// ตำแหน่ง
+const fetchEmployeePosition = async () => {
+  await http
+    .get(config.API.positionEmployeePosition)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeePositionOptions.value = option;
+      employeePositionOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// ด้านของตำแหน่ง
+const fetchEmployeePositionSide = async () => {
+  await http
+    .get(config.API.positionEmployeePositionSide)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeePositionSideOptions.value = option;
+      employeePositionSideOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// ระดับ
+const fetchEmployeeLevel = async () => {
+  await http
+    .get(config.API.positionEmployeeLevel)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeLevelOptions.value = option;
+      employeeLevelOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// กลุ่มงาน
+const fetchEmployeeGroup = async () => {
+  await http
+    .get(config.API.positionEmployeeGroup)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeGroupOptions.value = option;
+      employeeGroupOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+// สังกัด
+const fetchAgency = async () => {
+  await http
+    .get(config.API.organizationRoot)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.label.toString() });
+      });
+
+      agencyOptions.value = option;
+      agencyOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const nodeTree = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const selectAgency = (val: string) => {
+  fetchPositionNumber(val);
+  clickEditRow();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "posNo":
+      update(() => {
+        posNoOptions.value = posNoOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeePosition":
+      update(() => {
+        employeePositionOptions.value =
+          employeePositionOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeePositionSide":
+      update(() => {
+        employeePositionSideOptions.value =
+          employeePositionSideOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeeLevel":
+      update(() => {
+        employeeLevelOptions.value = employeeLevelOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "employeeGroup":
+      update(() => {
+        employeeGroupOptions.value = employeeGroupOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "agency":
+      update(() => {
+        agencyOptions.value = agencyOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "ref":
+      update(() => {
+        refOptions.value = refOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileSalaryEmployeeId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   console.log(data);
+        rows.value = [];
+        data.map((e: ResponseObjectEmployee) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            amount: e.amount,
+            positionSalaryAmount: e.positionSalaryAmount,
+            mouthSalaryAmount: e.mouthSalaryAmount,
+            oc: e.oc,
+            ocId: e.ocId,
+            posNo: e.posNo,
+            posNoId: e.posNoId,
+            posNoEmployee: e.posNoEmployee,
+            positionEmployeeGroup: e.positionEmployeeGroup,
+            positionEmployeeGroupId: e.positionEmployeeGroupId,
+            positionEmployeeLevel: e.positionEmployeeLevel,
+            positionEmployeeLevelId: e.positionEmployeeLevelId,
+            positionEmployeePosition: e.positionEmployeePosition,
+            positionEmployeePositionId: e.positionEmployeePositionId,
+            positionEmployeePositionSide: e.positionEmployeePositionSide,
+            positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+            salaryClass: e.salaryClass,
+            salaryRef: e.salaryRef,
+            refCommandNo: e.refCommandNo,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchPositionNumber = async (id: string) => {
+  //   loaderPage(true);
+  if (id == null || id == "") return;
+  await http
+    .get(config.API.getPositionNumberIdByOcId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      posNoOptions.value = option;
+      posNoOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = async () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  amount.value = row.amount;
+  positionSalaryAmount.value = row.positionSalaryAmount;
+  mouthSalaryAmount.value = row.mouthSalaryAmount;
+  selected.value = row.ocId;
+  //   positionId.value = row.positionId;
+  //   posNoId.value = row.posNoId;
+  //   positionLineId.value = row.positionLineId;
+  //   positionPathSideId.value = row.positionPathSideId;
+  //   positionTypeId.value = row.positionTypeId;
+  //   positionLevelId.value = row.positionLevelId;
+  //   positionExecutiveId.value = row.positionExecutiveId;
+  //   positionExecutiveSideId.value = row.positionExecutiveSideId;
+  posNoId.value = row.posNoId ?? "";
+  posNoEmployee.value = row.posNoEmployee ?? "";
+  employeePositionId.value = row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = row.positionEmployeeGroupId ?? "";
+  agencyId.value = row.ocId ?? "";
+
+  salaryClass.value = row.salaryClass ?? "";
+  salaryRef.value = row.salaryRef ?? "";
+  refCommandNo.value = row.refCommandNo ?? "";
+  id.value = row.id;
+  await fetchPositionNumber(row.ocId ?? "");
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  //   console.log(rowIndex.value);
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * gen ตำแหน่ง (รายละเอียด)
+ */
+const templateDetail = async () => {
+  //   salaryClass.value = "";
+  //   if (ocId.value != "") {
+  //     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
+  //   }
+  //   const positionF = positionOptions.value.filter(
+  //     (r: DataOption) => r.id == positionId.value
+  //   );
+  //   if (positionF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
+  //   }
+  //   const posNoF = posNoOptions.value.filter(
+  //     (r: DataOption) => r.id == posNoId.value
+  //   );
+  //   if (posNoF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
+  //   }
+  //   const positionLineF = positionLineOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLineId.value
+  //   );
+  //   if (positionLineF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
+  //   }
+  //   const positionPathSideF = positionSideOptions.value.filter(
+  //     (r: DataOption) => r.id == positionPathSideId.value
+  //   );
+  //   if (positionPathSideF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
+  //   }
+  //   const positionTypeF = positionTypeOptions.value.filter(
+  //     (r: DataOption) => r.id == positionTypeId.value
+  //   );
+  //   if (positionTypeF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
+  //   }
+  //   const positionLevelF = positionLevelOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLevelId.value
+  //   );
+  //   if (positionLevelF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
+  //   }
+  //   const positionExecutiveF = positionExecutiveOptions.value.filter(
+  //     (r: DataOption) => r.id == positionExecutiveId.value
+  //   );
+  //   if (positionExecutiveF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
+  //   }
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileSalaryEmployeeId(profileId.value), {
+        amount: amount.value,
+        date: dateToISO(date.value),
+        positionSalaryAmount: positionSalaryAmount.value,
+        mouthSalaryAmount: mouthSalaryAmount.value,
+        ocId: agencyId.value,
+        //   posNoId: posNoId.value,
+        posNoEmployee: posNoEmployee.value,
+        positionEmployeeGroupId: employeeGroupId.value,
+        positionEmployeeLevelId: employeeLevelId.value,
+        positionEmployeePositionId: employeePositionId.value,
+        positionEmployeePositionSideId: employeePositionSideId.value,
+        salaryClass: salaryClass.value,
+        salaryRef: salaryRef.value,
+        refCommandNo: refCommandNo.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileSalaryEmployeeId(id.value), {
+      amount: amount.value,
+      date: dateToISO(date.value),
+      positionSalaryAmount: positionSalaryAmount.value,
+      mouthSalaryAmount: mouthSalaryAmount.value,
+      ocId: agencyId.value,
+      //   posNoId: posNoId.value,
+      posNoEmployee: posNoEmployee.value,
+      positionEmployeeGroupId: employeeGroupId.value,
+      positionEmployeeLevelId: employeeLevelId.value,
+      positionEmployeePositionId: employeePositionId.value,
+      positionEmployeePositionSideId: employeePositionSideId.value,
+      salaryClass: salaryClass.value,
+      salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบข้อมูล
+ */
+const fetchDataDelete = async () => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profileSalaryId(id.value))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ *  dialog ลบข้อมูล
+ */
+const clickDelete = async () => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await fetchDataDelete(),
+    async () => await fetchData(),
+    false
+  );
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined,
+      false
+    );
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataPropsEmployee) => {
+  //   console.log(props.row);
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  amount.value = props.row.amount;
+  positionSalaryAmount.value = props.row.positionSalaryAmount;
+  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+
+  posNoId.value = props.row.posNoId ?? "";
+  posNoEmployee.value = props.row.posNoEmployee ?? "";
+  employeePositionId.value = props.row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = props.row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
+  agencyId.value = props.row.ocId ?? "";
+
+  //   refSelected.value = props.row
+  salaryClass.value = props.row.salaryClass ?? "";
+  salaryRef.value = props.row.salaryRef ?? "";
+  refCommandNo.value = props.row.refCommandNo ?? "";
+  id.value = props.row.id;
+  await fetchPositionNumber(props.row.ocId ?? "");
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  amount.value = null;
+  positionSalaryAmount.value = null;
+  mouthSalaryAmount.value = null;
+
+  posNoId.value = "";
+  posNoEmployee.value = "";
+  employeePositionId.value = "";
+  employeePositionSideId.value = "";
+  employeeLevelId.value = "";
+  employeeGroupId.value = "";
+  agencyId.value = "";
+  agencyOptions.value = [];
+
+  salaryClass.value = "";
+  refSelected.value = null;
+  salaryRef.value = "";
+  refCommandNo.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        edit.value = false;
+        await checkRowPage();
+        await getData();
+      },
+      undefined,
+      false
+    );
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+const onSelected = async (id: string) => {
+  await fetchPositionNumber(id);
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRowRef = () => {
+  editRow.value = true;
+  salaryRef.value = refSelected.value?.name;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsEmployee) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileSalaryHisId(row.id))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log("clickHistory", data);
+      rowsHistory.value = [];
+      data.map((e: ResponseObjectEmployee) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          amount: e.amount,
+          positionSalaryAmount: e.positionSalaryAmount,
+          mouthSalaryAmount: e.mouthSalaryAmount,
+          oc: e.oc,
+          ocId: e.ocId,
+          posNo: e.posNo,
+          posNoId: e.posNoId,
+          posNoEmployee: e.posNoEmployee,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          positionEmployeeGroupId: e.positionEmployeeGroupId,
+          positionEmployeeLevel: e.positionEmployeeLevel,
+          positionEmployeeLevelId: e.positionEmployeeLevelId,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionId: e.positionEmployeePositionId,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+          salaryClass: e.salaryClass,
+          salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Talent.vue b/src/components/information/Talent.vue
new file mode 100644
index 000000000..5cf4e24dd
--- /dev/null
+++ b/src/components/information/Talent.vue
@@ -0,0 +1,684 @@
+<!-- card ความสามารถพิเศษ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ความสามารถพิเศษ"
+        icon="mdi-folder-star"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ความสามารถพิเศษ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="field"
+                :rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
+                hide-bottom-space
+                :label="`${'ด้าน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="remark"
+                hide-bottom-space
+                :label="`${'หมายเหตุ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Talent";
+import type { ResponseObject } from "@/components/information/interface/response/Talent";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const field = ref<string>();
+const detail = ref<string>();
+const remark = ref<string>();
+const reference = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขความสามารถพิเศษ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.talent.columns.length == 0
+  ? (visibleColumns.value = ["field", "detail", "remark", "reference"])
+  : (visibleColumns.value = profileData.talent.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "field",
+  "detail",
+  "remark",
+  "reference",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("talent", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAbiliId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            field: e.field,
+            detail: e.detail,
+            remark: e.remark,
+            reference: e.reference,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  field.value = row.field;
+  detail.value = row.detail;
+  remark.value = row.remark;
+  reference.value = row.reference;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileAbiliId(profileId.value), {
+        id: id.value,
+        field: field.value,
+        detail: detail.value,
+        remark: remark.value,
+        reference: reference.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileAbiliId(id.value), {
+      id: id.value,
+      field: field.value,
+      detail: detail.value,
+      remark: remark.value,
+      reference: reference.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileAbiliId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  field.value = props.row.field;
+  detail.value = props.row.detail;
+  remark.value = props.row.remark;
+  reference.value = props.row.reference;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  field.value = "";
+  detail.value = "";
+  remark.value = "";
+  reference.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileAbiliHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          field: e.field,
+          detail: e.detail,
+          remark: e.remark,
+          reference: e.reference,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/Train.vue b/src/components/information/Train.vue
new file mode 100644
index 000000000..965c5aa2d
--- /dev/null
+++ b/src/components/information/Train.vue
@@ -0,0 +1,1130 @@
+<!-- card การฝึกอบรม/ดูงาน -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="การฝึกอบรม/ดูงาน"
+        icon="mdi-briefcase"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="
+                  col.name == 'startDate' ||
+                  col.name == 'endDate' ||
+                  col.name == 'dateOrder'
+                "
+                class="table_ellipsis"
+              >
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'yearly'" class="table_ellipsis">
+                {{ col.value + 543 }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="การฝึกอบรม/ดูงาน" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="name"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
+                ]"
+                :label="`${'ชื่อโครงการ/หลักสูตรการฝึกอบรม'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="topic"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
+                ]"
+                :label="`${'หัวข้อการฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="startDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(startDate)"
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม/ดูงาน'}`,
+                    ]"
+                    :label="`${'วันเริ่มต้นการฝึกอบรม/ดูงาน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="endDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(endDate)"
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือกวันสิ้นสุดการฝึกอบรม/ดูงาน'}`,
+                    ]"
+                    :label="`${'วันสิ้นสุดการฝึกอบรม/ดูงาน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="yearly"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="yearly + 543"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
+                    :label="`${'ปีงบประมาณ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="place"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
+                ]"
+                :label="`${'สถานที่ฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="duration"
+                :label="`${'รวมระยะเวลาในการฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="department"
+                :label="`${'หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="numberOrder"
+                :label="`${'เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateOrder"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(dateOrder)"
+                    :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
+                  >
+                    <!-- :rules="[
+                      (val) =>
+                        !!val ||
+                        `${'กรุณาเลือกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,
+                    ]" -->
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'startDate' ||
+              col.name == 'endDate' ||
+              col.name == 'createdAt' ||
+              col.name == 'dateOrder'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'yearly'" class="table_ellipsis">
+            {{ col.value + 543 }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Train";
+import type { ResponseObject } from "@/components/information/interface/response/Train";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const name = ref<string>();
+const topic = ref<string>();
+const yearly = ref<number>(new Date().getFullYear());
+const place = ref<string>();
+const duration = ref<string>();
+const department = ref<string>();
+const numberOrder = ref<string>();
+const dateOrder = ref<Date>(new Date());
+const startDate = ref<Date>(new Date());
+const endDate = ref<Date>(new Date());
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขการฝึกอบรม/ดูงาน"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.train.columns.length == 0
+  ? (visibleColumns.value = [
+      "name",
+      "topic",
+      "yearly",
+      "place",
+      "duration",
+      "department",
+      "numberOrder",
+      "dateOrder",
+      "startDate",
+      "endDate",
+    ])
+  : (visibleColumns.value = profileData.train.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "endDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "yearly",
+    align: "left",
+    label: "ปีที่อบรม (พ.ศ.)",
+    sortable: true,
+    field: "yearly",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "place",
+    align: "left",
+    label: "สถานที่ฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "place",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "department",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "department",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numberOrder",
+    align: "left",
+    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
+    sortable: true,
+    field: "numberOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateOrder",
+    align: "left",
+    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
+    sortable: true,
+    field: "dateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "endDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "yearly",
+    align: "left",
+    label: "ปีที่อบรม (พ.ศ.)",
+    sortable: true,
+    field: "yearly",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "place",
+    align: "left",
+    label: "สถานที่ฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "place",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "department",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "department",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numberOrder",
+    align: "left",
+    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
+    sortable: true,
+    field: "numberOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateOrder",
+    align: "left",
+    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
+    sortable: true,
+    field: "dateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "name",
+  "topic",
+  "yearly",
+  "place",
+  "duration",
+  "department",
+  "numberOrder",
+  "dateOrder",
+  "startDate",
+  "endDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(startDate, (count, prevCount) => {
+  minDate.value = new Date(startDate.value);
+});
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("train", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileTrainId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            name: e.name,
+            topic: e.topic,
+            yearly: e.yearly,
+            place: e.place,
+            duration: e.duration,
+            department: e.department,
+            numberOrder: e.numberOrder,
+            dateOrder: e.dateOrder,
+            startDate: new Date(e.startDate),
+            endDate: new Date(e.endDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  name.value = row.name;
+  topic.value = row.topic;
+  yearly.value = row.yearly;
+  place.value = row.place;
+  duration.value = row.duration;
+  department.value = row.department;
+  numberOrder.value = row.numberOrder;
+  dateOrder.value = row.dateOrder;
+  startDate.value = row.startDate;
+  endDate.value = row.endDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileTrainId(profileId.value), {
+        id: id.value,
+        name: name.value,
+        topic: topic.value,
+        yearly: yearly.value,
+        place: place.value,
+        duration: duration.value,
+        department: department.value,
+        numberOrder: numberOrder.value,
+        dateOrder: dateOrder.value,
+        startDate: dateToISO(startDate.value),
+        endDate: dateToISO(endDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileTrainId(id.value), {
+      id: id.value,
+      name: name.value,
+      topic: topic.value,
+      yearly: yearly.value,
+      place: place.value,
+      duration: duration.value,
+      department: department.value,
+      numberOrder: numberOrder.value,
+      dateOrder: dateOrder.value,
+      startDate: dateToISO(startDate.value),
+      endDate: dateToISO(endDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileTrainId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  name.value = props.row.name;
+  topic.value = props.row.topic;
+  yearly.value = props.row.yearly;
+  place.value = props.row.place;
+  duration.value = props.row.duration;
+  department.value = props.row.department;
+  numberOrder.value = props.row.numberOrder;
+  dateOrder.value = props.row.dateOrder;
+  startDate.value = props.row.startDate;
+  endDate.value = props.row.endDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  name.value = "";
+  topic.value = "";
+  yearly.value = new Date().getFullYear();
+  place.value = "";
+  duration.value = "";
+  department.value = "";
+  numberOrder.value = "";
+  dateOrder.value = new Date();
+  startDate.value = new Date();
+  endDate.value = new Date();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileTrainHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          name: e.name,
+          topic: e.topic,
+          yearly: e.yearly,
+          place: e.place,
+          duration: e.duration,
+          department: e.department,
+          numberOrder: e.numberOrder,
+          dateOrder: e.dateOrder,
+          startDate: new Date(e.startDate),
+          endDate: new Date(e.endDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Work.vue b/src/components/information/Work.vue
new file mode 100644
index 000000000..000369e54
--- /dev/null
+++ b/src/components/information/Work.vue
@@ -0,0 +1,908 @@
+<!-- card ปฏิบัติราชการพิเศษ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ปฏิบัติราชการพิเศษ"
+        icon="mdi-bookmark"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="
+                  col.name == 'dateStart' ||
+                  col.name == 'dateEnd' ||
+                  col.name == 'refCommandDate'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateStart"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(dateStart)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่เริ่มต้น'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(dateEnd)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่สิ้นสุด'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'dateStart' ||
+              col.name == 'dateEnd' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Work";
+import type { ResponseObject } from "@/components/information/interface/response/Work";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const dateStart = ref<Date>(new Date());
+const dateEnd = ref<Date>(new Date());
+const detail = ref<string>();
+const reference = ref<string>();
+const minDate = ref<Date>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขปฏิบัติราชการพิเศษ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.work.columns.length == 0
+  ? (visibleColumns.value = [
+      "dateStart",
+      "dateEnd",
+      "detail",
+      "reference",
+      "refCommandNo",
+      "refCommandDate",
+    ])
+  : (visibleColumns.value = profileData.work.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มต้น",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "สิ้นสุด",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มต้น",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "สิ้นสุด",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "dateStart",
+  "dateEnd",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(dateStart, (count, prevCount) => {
+  minDate.value = new Date(dateStart.value);
+});
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("work", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileDutyId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            dateStart: new Date(e.dateStart),
+            dateEnd: new Date(e.dateEnd),
+            detail: e.detail,
+            reference: e.reference,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  dateStart.value = row.dateStart;
+  dateEnd.value = row.dateEnd;
+  detail.value = row.detail;
+  reference.value = row.reference;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileDutyId(profileId.value), {
+        id: id.value,
+        dateStart: dateToISO(dateStart.value),
+        dateEnd: dateToISO(dateEnd.value),
+        detail: detail.value,
+        reference: reference.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileDutyId(id.value), {
+      id: id.value,
+      dateStart: dateToISO(dateStart.value),
+      dateEnd: dateToISO(dateEnd.value),
+      detail: detail.value,
+      reference: reference.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileDutyId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  dateStart.value = props.row.dateStart;
+  dateEnd.value = props.row.dateEnd;
+  detail.value = props.row.detail;
+  reference.value = props.row.reference;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  dateStart.value = new Date();
+  dateEnd.value = new Date();
+  detail.value = "";
+  reference.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileDutyHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          dateStart: new Date(e.dateStart),
+          dateEnd: new Date(e.dateEnd),
+          detail: e.detail,
+          reference: e.reference,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/Receive/receiveDetail.vue b/src/modules/05_placement/components/Receive/receiveDetail.vue
index 534e2c65b..f25b95658 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail.vue
@@ -14,7 +14,55 @@
         <Family v-model:statusEdit="statusEdit" :statusAdd="false" />
       </div>
       <div id="certicate" name="15" class="row col-12 q-mt-md">
-        <Certicate />
+        <Certicate v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="education" name="2" class="row col-12 q-mt-md">
+        <EducationVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="training" name="3" class="row col-12 q-mt-md">
+        <TrainVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="insignia" name="4" class="row col-12 q-mt-md">
+        <InsigniaVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="coined" name="5" class="row col-12 q-mt-md">
+        <CoinedVue v-model:statusEdit="statusEdit" profileType="profileType" />
+      </div>
+      <div id="assessment" name="6" class="row col-12 q-mt-md">
+        <AssessmentVue
+          v-model:statusEdit="statusEdit"
+          profileType="profileType"
+        />
+      </div>
+      <div id="position" name="7" class="row col-12 q-mt-md">
+        <SalaryVue v-model:statusEdit="statusEdit" />
+        <!-- v-if="profileType === 'officer'" -->
+        <!-- <SalaryEmployeeTempVue
+          v-model:statusEdit="statusEdit"
+          v-else-if="employeeClass === 'temp'"
+        />
+        <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else /> -->
+      </div>
+      <div id="rule" name="8" class="row col-12 q-mt-md">
+        <DisciplineVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="leave" name="9" class="row col-12 q-mt-md">
+        <LeaveVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="talent" name="10" class="row col-12 q-mt-md">
+        <TalentVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="work" name="11" class="row col-12 q-mt-md">
+        <WorkVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="record" name="12" class="row col-12 q-mt-md">
+        <RecordVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="other" name="13" class="row col-12 q-mt-md">
+        <OtherVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="document" name="14" class="row col-12 q-my-md">
+        <DocumentVue v-model:statusEdit="statusEdit" />
       </div>
     </div>
     <Image />
@@ -29,6 +77,20 @@ import Address from "@/components/information/Address.vue";
 import Family from "@/components/information/Family.vue";
 import Certicate from "@/components/information/Certicate.vue";
 
+import EducationVue from "@/components/information/Education.vue";
+import TrainVue from "@/components/information/Train.vue";
+import InsigniaVue from "@/components/information/Insignia.vue";
+import CoinedVue from "@/components/information/Coin.vue";
+import AssessmentVue from "@/components/information/Assessment.vue";
+import SalaryVue from "@/components/information/Salary.vue";
+import DisciplineVue from "@/components/information/Discipline.vue";
+import LeaveVue from "@/components/information/Leave.vue";
+import TalentVue from "@/components/information/Talent.vue";
+import WorkVue from "@/components/information/Work.vue";
+import RecordVue from "@/components/information/Record.vue";
+import OtherVue from "@/components/information/Other.vue";
+import DocumentVue from "@/components/information/Document.vue";
+
 const statusEdit = ref<boolean>(false);
 </script>
 <style lang="scss" scoped>