diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index 4620c4168..436db3d6a 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -15,5 +15,6 @@ export default {
   /** รายการอัตราเงินเดือน*/
   salaryRateList: salaryRate,
   salaryRateListByid: (id: string) => `${salaryRate}/${id}`,
-  salaryReportByid:(id:string) => `${salary}/report/${id}`
+  salaryReportByid: (id: string) => `${salary}/report/${id}`,
+  salaryPeriod: () => `${salary}/period`,
 };
diff --git a/src/modules/13_salary/components/SalaryRound/DialogForm.vue b/src/modules/13_salary/components/SalaryRound/DialogForm.vue
index e69de29bb..cf234e761 100644
--- a/src/modules/13_salary/components/SalaryRound/DialogForm.vue
+++ b/src/modules/13_salary/components/SalaryRound/DialogForm.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { ref, defineModel, defineProps, watch } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type {
+  ObjectRef,
+  DataOption,
+} from "@/modules/13_salary/interface/response/Main";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+
+import config from "@/app.config";
+
+const $q = useQuasar();
+const isActive = ref<boolean>(false);
+const period = ref<string>("");
+const modal = defineModel<boolean>("modal", { required: true });
+const mixin = useCounterMixin();
+const { dialogConfirm, date2Thai, messageError } = mixin;
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const effectiveDate = ref<Date | null>(null);
+/** ตัวแปร validate */
+const periodRef = ref<Object | null>(null);
+const effectiveDateRef = ref<Object | null>(null);
+const typeOptions = ref<DataOption[]>([
+  { id: "SPECIAL", name: "รอบพิเศษ" },
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
+const objectForm: ObjectRef = {
+  period: periodRef,
+  effectiveDate: effectiveDateRef,
+};
+
+const props = defineProps({
+  getData: Function,
+  edit: Boolean,
+  idRound: String,
+  period: String,
+  effectiveDate: Date,
+  isActive: Boolean,
+});
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectForm) {
+    if (Object.prototype.hasOwnProperty.call(objectForm, key)) {
+      const property = objectForm[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+
+  if (hasError.every((result) => result === true)) {
+    if(props.edit == true){
+      editSummit();
+    }else{
+      onSubmit();
+    }
+  }
+}
+
+function saveData() {}
+function clearForm() {
+  isActive.value = false;
+  period.value = "";
+  effectiveDate.value = null;
+}
+
+function close() {
+  modal.value = false;
+  clearForm();
+}
+
+function editSummit(){
+  dialogConfirm($q, () => {
+    const body = {
+      period: period.value,
+      isActive: isActive.value,
+      effectiveDate: effectiveDate.value,
+    };
+    http
+      .put(config.API.salaryPeriod()+`/${props.idRound}`, body)
+      .then((res) => {
+        modal.value = false;
+        clearForm();
+        props.getData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  });
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    const body = {
+      period: period.value,
+      isActive: isActive.value,
+      effectiveDate: effectiveDate.value,
+    };
+    http
+      .post(config.API.salaryPeriod(), body)
+      .then((res) => {
+        modal.value = false;
+        clearForm();
+        props.getData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  });
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+watch(
+  () => props.edit,
+  () => {
+    if (props.edit == true) {
+      period.value = props.period ? props.period :'';
+      effectiveDate.value = props.effectiveDate ? props.effectiveDate:null;
+      isActive.value = props.isActive;
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header
+        :tittle="`${
+          props.edit ? `แก้ไขรอบการขึ้นเงินเดือน` : `เพิ่มรอบการขึ้นเงินเดือน`
+        }`"
+        :close="close"
+      />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-select
+            ref="periodRef"
+            :class="inputEdit(isReadonly)"
+            v-model="period"
+            label="รอบการขึ้นเงินเดือน"
+            dense
+            outlined
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="typeOptions"
+            :rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="effectiveDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :readonly="isReadonly"
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                for="effectiveDate"
+                ref="effectiveDateRef"
+                outlined
+                dense
+                :class="inputEdit(isReadonly)"
+                :readonly="isReadonly"
+                hide-bottom-space
+                :model-value="
+                  effectiveDate != null ? date2Thai(effectiveDate) : null
+                "
+                label="วันที่มีผลบังคับใช้งาน"
+                :rules="[
+                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้งาน'}`,
+                ]"
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+          <div class="col q-pa-sm bg-white border_custom text-weight-medium">
+            <div class="row items-center q-my-sm justify-between">
+              <p class="q-ma-none">สถานะการใช้งาน</p>
+              <label class="toggle-control">
+                <input type="checkbox" v-model="isActive" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/13_salary/interface/response/Main.ts b/src/modules/13_salary/interface/response/Main.ts
index ec030f287..eb0bd2818 100644
--- a/src/modules/13_salary/interface/response/Main.ts
+++ b/src/modules/13_salary/interface/response/Main.ts
@@ -40,4 +40,23 @@ interface SalaryPosLevel {
   posLevelRank: number;
 }
 
-export type { Salary, SalaryRate, SalaryPosType, SalaryPosLevel };
+interface RowList {
+  id: string;
+  period: string|null;
+  isActive: boolean|null;
+  effectiveDate: Date|null|string;
+  status: string|null;
+}
+
+interface Row {
+  data: [Row];
+  total: number;
+}
+
+interface ObjectRef {
+  period: object | null;
+  effectiveDate: object | null;
+  [key: string]: any;
+}
+
+export type { Salary, SalaryRate, SalaryPosType, SalaryPosLevel,RowList,Row,ObjectRef,DataOption };
diff --git a/src/modules/13_salary/store/SalaryStore.ts b/src/modules/13_salary/store/SalaryStore.ts
index 03efb6e2f..5fd33c665 100644
--- a/src/modules/13_salary/store/SalaryStore.ts
+++ b/src/modules/13_salary/store/SalaryStore.ts
@@ -1,6 +1,49 @@
 import { defineStore } from "pinia";
-
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import type { RowList, Row } from '@/modules/13_salary/interface/response/Main'
+import { useCounterMixin } from "@/stores/mixin";
 // store 
 export const useSalaryDataStore = defineStore("salaryDataStore", () => {
-  return {};
+  const rows = ref<RowList[]>([]);
+  const visibleColumns = ref<string[]>([]);
+  const columns = ref<QTableProps["columns"]>([]);
+
+  const mixin = useCounterMixin()
+  const{ date2Thai }= mixin
+
+
+  function fetchDataMap(data: RowList[]) {
+    rows.value = data.map((i: RowList) => ({
+      id: i.id,
+      period: i.period !== null ? statusTothai(i.period) : null,
+      isActive: i.isActive !== null ? i.isActive : null,
+      effectiveDate: i.effectiveDate !== null ? date2Thai(i.effectiveDate as Date) : null,
+      status: i.status !== null ? i.status : null,
+    }));
+  }
+
+          /**
+         * แปลง status เป็น Text
+         * @param val status
+         * @returns text
+         */
+          function statusTothai(val: string) {
+            switch (val) {
+                case "SPECIAL":
+                    return "รอบพิเศษ";
+                case "APR":
+                    return "รอบเมษายน";
+                case "OCT":
+                    return "รอบตุลาคม";
+                default:
+                    return "-";
+            }
+        };
+  return {
+    rows,
+    visibleColumns,
+    columns,
+    fetchDataMap
+  };
 });
diff --git a/src/modules/13_salary/views/salaryRound.vue b/src/modules/13_salary/views/salaryRound.vue
index a64215f74..09694e845 100644
--- a/src/modules/13_salary/views/salaryRound.vue
+++ b/src/modules/13_salary/views/salaryRound.vue
@@ -1,4 +1,153 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { getDateMeta } from "@fullcalendar/core/internal";
+import { ref, reactive, onMounted } from "vue";
+import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { RowList, Row } from "@/modules/13_salary/interface/response/Main";
+import Dialog from "@/modules/13_salary/components/SalaryRound/DialogForm.vue";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import { useQuasar } from "quasar";
+
+const idRound = ref<string>("");
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogRemove, showLoader, hideLoader, messageError } = mixin;
+const dataStore = useSalaryDataStore();
+const year = ref<number>(0);
+const filterKeyword = ref<string>("");
+const rowsPerPage = ref<number>(10);
+const editCheck = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+const period = ref<string>("");
+const isActive = ref<boolean>(false);
+const effectiveDate = ref<Date | null>(null);
+
+const maxPage = ref<number>(1);
+const currentPage = ref<number>(1);
+const page = ref<number>(1);
+
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "period",
+  "effectiveDate",
+  "isActive",
+]);
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "center",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "period",
+    align: "left",
+    label: "รอบการขึ้นเงินเดือน",
+    sortable: true,
+    field: "period",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "effectiveDate",
+    align: "left",
+    label: "วันที่มีผลบังคับใช้",
+    sortable: true,
+    field: "effectiveDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะการใช้งาน",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function clickAdd() {
+  dialog.value = true;
+}
+/** ดึงข้อมูลเริ่มต้น */
+function getData() {
+  showLoader();
+  http
+    .get(
+      config.API.salaryPeriod() +
+        `?page=${page.value}&pageSise=${rowsPerPage.value}&keyword=${filterKeyword.value}&year=${year.value}`
+    )
+    .then((res) => {
+      // maxPage.value = Math.ceil(dataList[0].total / rowsPerPage.value);
+      // dataStore.fetchDataMap(dataList[0].data);
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      // fetchAppealComplain(res.data.result.data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+function dataUpdate() {
+  getData();
+}
+/** set ปี ทั้งหมด */
+function yearAll() {
+  year.value = 0;
+  getData();
+}
+
+/** ฟังชั่น เคลียฟิลเตอร์ */
+function resetFilter() {
+  filterKeyword.value = "";
+  getData();
+}
+
+/** ดึงข้อมูลเมื่อ กด enter */
+function filterFn() {
+  getData();
+}
+
+function deleteData(id: string) {
+  showLoader();
+  http
+    .delete(config.API.salaryPeriod() + `/${id}`)
+    .then((res) => {
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(async () => {
+  year.value = new Date().getFullYear();
+  getData();
+
+  dataStore.visibleColumns = visibleColumns.value;
+  dataStore.columns = columns.value;
+});
+</script>
 
 <template>
   <div class="row items-center">
@@ -6,6 +155,224 @@
       รอบการขึ้นเงินเดือน
     </div>
   </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-mb-sm q-col-gutter-sm">
+      <div class="col-2">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="year"
+          class="col-2"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          @update:model-value="dataUpdate"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              lazy-rules
+              outlined
+              :model-value="year === 0 ? null : Number(year) + 543"
+              :label="`${'ปีงบประมาณ'}`"
+            >
+              <template v-if="year" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="yearAll"
+                  class="cursor-pointer"
+                />
+              </template>
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
+      <div>
+        <q-btn
+          id="addComplaints"
+          for="addComplaints"
+          size="12px"
+          flat
+          round
+          color="primary"
+          icon="mdi-plus"
+          @click="clickAdd()"
+          ><q-tooltip>สร้างรอบเงินเดือน</q-tooltip></q-btn
+        >
+      </div>
+      <q-space />
+      <q-input
+        for="#search"
+        class="col-xs-12 col-sm-3 col-md-2"
+        standout
+        dense
+        v-model="filterKeyword"
+        ref="filterRef"
+        outlined
+        placeholder="ค้นหา"
+        @keydown.enter.prevent="filterFn"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filterKeyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+
+      <q-select
+        id="visibleColumns"
+        for="visibleColumns"
+        v-model="dataStore.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="dataStore.columns"
+        option-value="name"
+        options-cover
+        class="col-xs-12 col-sm-3 col-md-2"
+      />
+    </div>
+
+    <div class="col-12">
+      <d-table
+        ref="table"
+        :columns="dataStore.columns"
+        :rows="dataStore.rows"
+        row-key="id"
+        flat
+        bordered
+        :paging="true"
+        dense
+        class="custom-header-table"
+        :visible-columns="dataStore.visibleColumns"
+        v-model:pagination="pagination"
+        :rows-per-page-options="[10, 25, 50, 100]"
+      >
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              style="color: #000000; font-weight: 500"
+            >
+              <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.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{
+                  (currentPage - 1) * Number(pagination.rowsPerPage) +
+                  props.rowIndex +
+                  1
+                }}
+              </div>
+              <div v-else-if="col.name === 'isActive'">
+                <q-icon
+                  v-if="col.value == false"
+                  name="mdi-close"
+                  color="grey"
+                  class="text-h5"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                />
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="edit"
+                flat
+                dense
+                round
+                class="q-mr-xs"
+                size="12px"
+                icon="edit"
+                clickable
+                @click.stop="
+                  () => {
+                    editCheck = true;
+                    dialog = true;
+                    idRound = props.row.id;
+                    period = props.row.period;
+                    effectiveDate = props.row.effectiveDate;
+                    isActive = props.row.isActive;
+                  }
+                "
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="12px"
+                icon="mdi-delete"
+                clickable
+                @click.stop="
+                  dialogRemove($q, async () => await deleteData(props.row.id))
+                "
+                v-close-popup
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <Dialog
+    v-model:modal="dialog"
+    :edit="editCheck"
+    :get-data="getData"
+    :idRound="idRound"
+    :period="period"
+    :effectiveDate?="effectiveDate"
+    :isActive="isActive"
+  />
 </template>
 
 <style scoped></style>