From f96643cc6c1aa95d09635695f19fa002a2028765 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 11 Mar 2024 17:48:15 +0700
Subject: [PATCH] =?UTF-8?q?=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=20=3D>=20=E0=B8=95=E0=B8=B3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87=E0=B9=80=E0=B8=87=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/salaryNew/Salary.vue           |   2 +-
 .../detail/Salary/01_PositionSalary.vue       | 726 +++++++++++++++++-
 .../Salary/01_PositionSalaryHistory.vue       | 227 ++++++
 .../04_registryNew/interface/index/Main.ts    |   6 +-
 .../04_registryNew/interface/index/salary.ts  |  12 +
 .../interface/request/Salary.ts               |  19 +
 .../04_registryNew/stores/DetailMain.ts       |   2 +-
 src/modules/04_registryNew/stores/salary.ts   | 187 +++++
 8 files changed, 1176 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
 create mode 100644 src/modules/04_registryNew/interface/index/salary.ts
 create mode 100644 src/modules/04_registryNew/interface/request/Salary.ts
 create mode 100644 src/modules/04_registryNew/stores/salary.ts

diff --git a/src/modules/04_registry/components/salaryNew/Salary.vue b/src/modules/04_registry/components/salaryNew/Salary.vue
index 264cac96a..bc3b5ca37 100644
--- a/src/modules/04_registry/components/salaryNew/Salary.vue
+++ b/src/modules/04_registry/components/salaryNew/Salary.vue
@@ -671,7 +671,7 @@
       </q-form>
     </q-card>
   </q-dialog>
-  
+
   <HistoryTable
     :rows="rowsHistory"
     :columns="columnsHistory"
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
index 15b2df816..cbbdc460b 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
@@ -1,6 +1,728 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+import type { DataOption2 } from "@/modules/04_registryNew/interface/index/Main";
+import type { ObjectSalaryRef } from "@/modules/04_registryNew/interface/index/salary";
+import type { FormSalaryNew } from "@/modules/04_registryNew/interface/request/Salary";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryDataStore } from "@/modules/04_registryNew/stores/salary";
+
+const $q = useQuasar();
+const store = useSalaryDataStore();
+const { date2Thai, dialogConfirm, showLoader, hideLoader, messageError } =
+  useCounterMixin();
+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: "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: "postionTypeName",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "postionTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevelName",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevelName",
+    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 visibleColumns = ref<string[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "posNo",
+  "postionTypeName",
+  "positionLevelName",
+  "salaryRef",
+  "refCommandNo",
+]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const maxPage = ref<number>(1);
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const rows = ref<any>([
+  {
+    id: "1",
+  },
+  {
+    id: "2",
+  },
+  {
+    id: "3",
+  },
+]);
+
+const formDataSalary = reactive<FormSalaryNew>({
+  date: null,
+  posNo: "",
+  templatePos: "",
+  position: "",
+  positionLineName: "",
+  typePosition: "",
+  levelPosition: "",
+  positionPathSideName: "",
+  positionExecutiveName: "",
+  salaryCompensation: null,
+  salary: null,
+  salaryPos: null,
+  refCommandNo: "",
+  templateDoc: "",
+  doc: "",
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const dateRef = ref<Object | null>(null);
+const posNoRef = ref<Object | null>(null);
+const positionRef = ref<Object | null>(null);
+const typePositionRef = ref<Object | null>(null);
+const levelPositionRef = ref<Object | null>(null);
+const salaryRef = ref<Object | null>(null);
+const docRef = ref<Object | null>(null);
+
+const ObjectRef: ObjectSalaryRef = {
+  date: dateRef,
+  posNo: posNoRef,
+  position: positionRef,
+  typePosition: typePositionRef,
+  levelPosition: levelPositionRef,
+  salary: salaryRef,
+  doc: docRef,
+};
+
+const modalDialogSalary = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+
+const posNoOptions = ref<DataOption2[]>(store.optionTemplatePos);
+const positionLineOptions = ref<DataOption2[]>(store.optionTemplatePos);
+const posTypeOptions = ref<DataOption2[]>(store.optionTemplatePos);
+const posLevelOption = ref<DataOption2[]>(store.optionTemplatePos);
+const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
+
+function onClickOpenDialog(type: string) {
+  if (type === "ADD") {
+    isStatusEdit.value = false;
+  } else {
+    isStatusEdit.value = true;
+  }
+  modalDialogSalary.value = true;
+}
+function onClickCcloseDialog() {
+  modalDialogSalary.value = false;
+}
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "pos":
+      update(() => {
+        posNoOptions.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "positionLineName":
+      update(() => {
+        positionLineOptions.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "posType":
+      update(() => {
+        posTypeOptions.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "posLevel":
+      update(() => {
+        posLevelOption.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "doc":
+      update(() => {
+        docOption.value = store.optionTemplateDoc.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+function updatePos(val: string) {
+  formDataSalary.position = val;
+}
+
+function updateDoc(val: string) {
+  formDataSalary.doc = val;
+}
+
+function onSubmit() {
+  const hasError = [];
+  for (const key in ObjectRef) {
+    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
+      const property = ObjectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm($q, () => {
+      onClickCcloseDialog();
+    });
+  }
+}
+
+const modalHistory = ref<boolean>(false);
+function ocClikcHistory() {
+  modalHistory.value = true;
+}
+</script>
 <template>
-  <div>ตำแหน่ง/เงินเดือน</div>
+  <div class="row items-center q-gutter-sm">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      ตำแหน่งเงินเดือน
+    </div>
+  </div>
+
+  <q-toolbar style="padding: 0px" class="text-primary">
+    <q-btn flat round dense icon="add" @click="onClickOpenDialog('ADD')">
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      dense
+      outlined
+      v-model="formFilter.keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-select
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+    />
+  </q-toolbar>
+  <d-table
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="rows"
+    :paging="true"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[20, 50, 100]"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th auto-width />
+        <q-th auto-width />
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td auto-width>
+          <q-btn
+            dense
+            size="12px"
+            flat
+            round
+            :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+            :disable="props.rowIndex + 1 == 1"
+            icon="mdi-arrow-up-bold"
+          >
+            <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+          </q-btn>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            dense
+            size="12px"
+            flat
+            round
+            :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+            :disable="rows.length == props.rowIndex + 1"
+            icon="mdi-arrow-down-bold"
+          >
+            <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+          </q-btn>
+        </q-td>
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="onClickOpenDialog('EDIT')"
+        >
+          <template>
+            {{ col.value ? col.value : "-" }}
+          </template>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="ocClikcHistory"
+          >
+            <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="formFilter.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="modalDialogSalary" persistent full-width>
+    <q-card>
+      <form @submit.prevent.stop="onSubmit">
+        <DialogHeader
+          :tittle="
+            isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
+          "
+          :close="onClickCcloseDialog"
+        />
+        <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-12">
+              <q-card flat bordered class="fit q-pa-sm">
+                <div class="row col-12 q-col-gutter-xs">
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-model="formDataSalary.date"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          ref="dateRef"
+                          outlined
+                          dense
+                          borderless
+                          :model-value="date2Thai(formDataSalary.date)"
+                          :rules="[
+                            (val: string) =>
+                              !!val ||
+                              `${'กรุณาเลือก วัน/เดือน/ปี'}`,
+                          ]"
+                          :label="`${'วัน/เดือน/ปี'}`"
+                          hide-bottom-space
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="event" class="cursor-pointer">
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      ref="posNoRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.posNo"
+                      hide-bottom-space
+                      :label="`${'เลขที่ตำแหน่ง'}`"
+                      :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                    >
+                    </q-input>
+                  </div>
+
+                  <div class="col-xs-12 col-sm-12 col-md-12 q-mt-lg">
+                    <q-select
+                      ref="templatePosRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.templatePos"
+                      :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+                      option-label="name"
+                      :options="posNoOptions"
+                      option-value="name"
+                      hide-bottom-space
+                      emit-value
+                      use-input
+                      input-debounce="0"
+                      @update:modelValue="updatePos"
+                      @filter="(inputValue: any,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
+                        )"
+                    />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-12 col-md-12">
+                    <q-input
+                      ref="positionRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.position"
+                      :label="`${'ตำแหน่ง'}`"
+                      type="textarea"
+                      hide-bottom-space
+                      :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-select
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.positionLineName"
+                      :label="`${'สายงาน'}`"
+                      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, 'positionLineName'
+                        )"
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-select
+                      ref="typePositionRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.typePosition"
+                      :label="`${'ตำแหน่งประเภท'}`"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="posTypeOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
+                      @filter="(inputValue: any,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
+                        )"
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-3">
+                    <q-select
+                      ref="levelPositionRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.levelPosition"
+                      :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                      :label="`${'ระดับ'}`"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="posLevelOption"
+                      option-value="name"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue: any,
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
+                          )"
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-3">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      v-model="formDataSalary.positionPathSideName"
+                      hide-bottom-space
+                      :label="`${'ด้าน/สาขา'}`"
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.positionExecutiveName"
+                      hide-bottom-space
+                      :label="`${'ตำแหน่งทางการบริหาร'}`"
+                    >
+                    </q-input>
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-4">
+                    <q-input
+                      ref="salaryRef"
+                      dense
+                      outlined
+                      v-model="formDataSalary.salary"
+                      label="เงินเดือน"
+                      mask="###,###,###,###"
+                      reverse-fill-mask
+                      :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-4">
+                    <q-input
+                      ref="amountRef"
+                      dense
+                      outlined
+                      v-model="formDataSalary.salaryPos"
+                      label="เงินประจำตำแหน่ง"
+                      mask="###,###,###,###"
+                      reverse-fill-mask
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-4">
+                    <q-input
+                      ref="amountRef"
+                      dense
+                      outlined
+                      v-model="formDataSalary.salaryCompensation"
+                      label="เงินค่าตอบแทนรายเดือน"
+                      mask="###,###,###,###"
+                      reverse-fill-mask
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-12">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.refCommandNo"
+                      hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`"
+                      mask="#####################"
+                    >
+                      <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
+                    </q-input>
+                  </div>
+
+                  <div class="col-xs-12 col-sm-12 col-md-12">
+                    <q-select
+                      ref="templateDocRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.templateDoc"
+                      :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                      option-label="name"
+                      :options="docOption"
+                      option-value="name"
+                      emit-value
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @update:modelValue="updateDoc"
+                      @filter="(inputValue: any,
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
+                          )"
+                    />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-12 col-md-12">
+                    <q-input
+                      ref="docRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.doc"
+                      :label="`${'เอกสารอ้างอิง'}`"
+                      type="textarea"
+                      hide-bottom-space
+                      :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                    />
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-section align="right">
+          <q-btn label="บันทึก" type="submit" color="secondary">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-section>
+      </form>
+    </q-card>
+  </q-dialog>
+
+  <DialogHistory v-model:modal="modalHistory" />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
new file mode 100644
index 000000000..eb0c309a1
--- /dev/null
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+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: "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: "postionTypeName",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "postionTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevelName",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevelName",
+    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 visibleColumns = ref<string[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "posNo",
+  "postionTypeName",
+  "positionLevelName",
+  "salaryRef",
+  "refCommandNo",
+]);
+const rows = ref<any>([]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const filter = ref<string>("");
+
+function closeDialog() {
+  modal.value = false;
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <DialogHeader
+        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <q-toolbar style="padding: 0px" class="text-primary">
+          <q-space />
+          <q-input
+            dense
+            outlined
+            v-model="filter"
+            label="ค้นหา"
+            class="q-mr-sm"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          row-key="id"
+          flat
+          bordered
+          dense
+          :filter="filter"
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[20, 50, 100]"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <q-th auto-width />
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <template>
+                  {{ col.value ? col.value : "-" }}
+                </template>
+              </q-td>
+            </q-tr>
+          </template>
+          <!-- <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formFilter.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template> -->
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/interface/index/Main.ts b/src/modules/04_registryNew/interface/index/Main.ts
index 46133c9b9..5930b43ac 100644
--- a/src/modules/04_registryNew/interface/index/Main.ts
+++ b/src/modules/04_registryNew/interface/index/Main.ts
@@ -6,5 +6,9 @@ interface DataOption {
   id: string;
   name: string;
 }
+interface DataOption2 {
+  id: number;
+  name: string;
+}
 
-export type { Pagination, DataOption };
+export type { Pagination, DataOption, DataOption2 };
diff --git a/src/modules/04_registryNew/interface/index/salary.ts b/src/modules/04_registryNew/interface/index/salary.ts
new file mode 100644
index 000000000..b702cde70
--- /dev/null
+++ b/src/modules/04_registryNew/interface/index/salary.ts
@@ -0,0 +1,12 @@
+interface ObjectSalaryRef {
+  date: object | null;
+  posNo: object | null;
+  position: object | null;
+  typePosition: object | null;
+  levelPosition: object | null;
+  salary: object | null;
+  doc: object | null;
+
+  [key: string]: any;
+}
+export type { ObjectSalaryRef };
diff --git a/src/modules/04_registryNew/interface/request/Salary.ts b/src/modules/04_registryNew/interface/request/Salary.ts
new file mode 100644
index 000000000..fdaea5559
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/Salary.ts
@@ -0,0 +1,19 @@
+interface FormSalaryNew {
+  date: Date | null;
+  posNo: string;
+  templatePos: string;
+  position: string;
+  positionLineName: string;
+  typePosition: string;
+  levelPosition: string;
+  positionPathSideName: string;
+  positionExecutiveName: string;
+  salary: number | null;
+  salaryPos: number | null;
+  salaryCompensation: number | null;
+  refCommandNo: string;
+  templateDoc: string;
+  doc: string;
+}
+
+export type { FormSalaryNew };
diff --git a/src/modules/04_registryNew/stores/DetailMain.ts b/src/modules/04_registryNew/stores/DetailMain.ts
index fec5f95ce..8ec35bba8 100644
--- a/src/modules/04_registryNew/stores/DetailMain.ts
+++ b/src/modules/04_registryNew/stores/DetailMain.ts
@@ -5,7 +5,7 @@ import { ref } from "vue";
 export const useRegistryDetailNewDataStore = defineStore(
   "registryNewDetail",
   () => {
-    const tabMain = ref<string>("1");
+    const tabMain = ref<string>("3");
     return { tabMain };
   }
 );
diff --git a/src/modules/04_registryNew/stores/salary.ts b/src/modules/04_registryNew/stores/salary.ts
new file mode 100644
index 000000000..2220e6692
--- /dev/null
+++ b/src/modules/04_registryNew/stores/salary.ts
@@ -0,0 +1,187 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+import type { DataOption2 } from "@/modules/04_registryNew/interface/index/Main";
+
+export const useSalaryDataStore = defineStore("salatyDataStore", () => {
+  const optionTemplatePos = ref<DataOption2[]>([
+    {
+      id: 1,
+      name: "เลื่อนเงินเดือน",
+    },
+    {
+      id: 2,
+      name: "เลื่อนเงินเดือน (ดีเด่น)",
+    },
+    {
+      id: 3,
+      name: "เลื่อนเงินเดือน (เพิ่มเติม)",
+    },
+
+    {
+      id: 4,
+      name: "ปรับเงินเดือน",
+    },
+
+    {
+      id: 5,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
+    },
+    {
+      id: 6,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
+    },
+    {
+      id: 7,
+      name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
+    },
+    {
+      id: 8,
+      name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
+    },
+    {
+      id: 9,
+      name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 10,
+      name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 11,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "โปรดเกล้าฯ {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 13,
+      name: "ช่วยราชการที่{หน่วยงานและรายละเอียดต่างๆ}",
+    },
+
+    {
+      id: 14,
+      name: "ปฏิบัติหน้าที่ในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 15,
+      name: "รักษาการในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 16,
+      name: "พ้นจากการทดลองปฏิบัติหน้าที่ราชการ",
+    },
+
+    {
+      id: 17,
+      name: "งดเลื่อนขั้นเงินเดือน",
+    },
+    {
+      id: 18,
+      name: "แก้ไขคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 19,
+      name: "ยกเลิกคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 20,
+      name: "กลับไปปฏิบัติงานทางต้นสังกัดเดิม",
+    },
+    {
+      id: 21,
+      name: "โปรดเกล้าฯ แต่งตั้งให้ดำรงตำแหน่ง{รายละเอียดของตำแหน่งและหน่วยงาน}",
+    },
+  ]);
+
+  const optionTemplateDoc = ref<DataOption2[]>([
+    {
+      id: 1,
+      name: "บรรจุและแต่งตั้งผู้สอบแข่งขันได้ คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 2,
+      name: "ปรับเงินเดือนตาม{รายละเอียดของบัญชี เช่นชื่อ ฉบับที่ ปี พ.ศ.}",
+    },
+    {
+      id: 3,
+      name: "เลื่อนขั้นเงินเดือนตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 4,
+      name: "เลื่อนขั้นเงินเดือน คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 5,
+      name: "เลื่อนขั้นเงินเดือน (1 ขั้น) คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 6,
+      name: "เลื่อนขั้นเงินเดือน (1.5 ขั้น) คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 7,
+      name: "แต่งตั้งตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 8,
+      name: "คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 9,
+      name: "ปรับเงินเดือนตาม{รายละเอียดข้อมูล}",
+    },
+    {
+      id: 10,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม} ตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 11,
+      name: "เลื่อนระดับและแต่งตั้งคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "แต่งตั้งดำรงตำแหน่ง{ชื่อตำแหน่ง} คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 13,
+      name: "แต่งตั้งคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 14,
+      name: "เลื่อนและแต่งตั้งโดยการสอบคัดเลือก คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 15,
+      name: "แต่งตั้งข้าราชการให้ดำรงตำแหน่งของ{รายละเอียดของตำแหน่งและหน่วยงาน} คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 16,
+      name: "ย้ายตามคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 17,
+      name: "แต่งตั้งข้าราชการให้ดำรงตำแหน่งตามคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 18,
+      name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกาการปรับอัตราเงินเดือนของข้าราชการ พ.ศ. (.............)",
+    },
+  ]);
+
+  return {
+    optionTemplatePos,
+    optionTemplateDoc,
+  };
+});