From 94e5e136e646c151e9e2316f9e01433e371a449f Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 13 Mar 2024 15:07:10 +0700
Subject: [PATCH] =?UTF-8?q?api=20=E0=B8=9C=E0=B8=B1=E0=B8=87=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=8D=E0=B8=8A=E0=B8=B5=E0=B8=84=E0=B9=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81?=
 =?UTF-8?q?=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B3=20=3D>=20=E0=B8=9A=E0=B8=B1=E0=B8=8D?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B5=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/13_salary/api.salary.ts               |  13 +-
 .../DialogEmployeeChart.vue                   |  68 ++++-
 .../DialogEmployeeRate.vue                    |  83 ++++--
 .../DialogEmployeeUpload.vue                  | 281 ++++++++++++++++++
 .../salaryEmployeeChart/TabStructure.vue      | 141 ++++++---
 .../interface/index/EmployeeChart.ts          |  10 +-
 .../interface/request/EmployeeChart.ts        |  16 +-
 .../interface/response/salaryEmployeeChart.ts |  17 ++
 .../13_salary/views/salaryEmployeeRate.vue    | 126 ++++++--
 9 files changed, 648 insertions(+), 107 deletions(-)
 create mode 100644 src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue
 create mode 100644 src/modules/13_salary/interface/response/salaryEmployeeChart.ts

diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index 7d2d377c2..ebde4a4bf 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -29,5 +29,16 @@ export default {
   salaryListPerson: `${env.API_URI}/org/profile/salary/gen`,
   salaryPeriodProfile: `${salary}/period/org/profile`,
 
-  salaryProperty:(id:string)=> `${salaryPeriod}/org/property/${id}`,
+  salaryProperty: (id: string) => `${salaryPeriod}/org/property/${id}`,
+
+  /** รายการเงินเดือนลูกจ้างประจำ*/
+  salaryEmployeeChart: `${salary}/employee`,
+  salaryEmployeeChartByid: (id: string) => `${salary}/employee/${id}`,
+  salaryEmployeeChartCopy: `${salary}/employee/copy`,
+  salaryEmployeeChartFile: (id: string) => `${salary}/file/employee/${id}`,
+  salaryEmployeeChartDelFile: (id: string, fileName: string) =>
+    `${salary}/file/employee/${id}/${fileName}`,
+
+  salaryEmployeeRateList: `${salaryRate}/employee`,
+  salaryEmployeeRateListByid: (id: string) => `${salaryRate}/employee/${id}`,
 };
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
index 4f819e080..0ccf1fb82 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { computed, ref, reactive, watch } from "vue";
+import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type { ObjectCharRef } from "@/modules/13_salary/interface/index/EmployeeChart";
 import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
@@ -24,6 +26,10 @@ const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   isStatusEdit: { type: Boolean, required: true },
   data: { type: Object, required: true },
+  fetchData: {
+    type: Function,
+    required: true,
+  },
 });
 const formData = reactive<FormDataChar>({
   name: "", //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
@@ -43,6 +49,29 @@ const ObjectRef: ObjectCharRef = {
   group: groupRef,
 };
 
+function fetchSalaryDetail(id: string) {
+  showLoader();
+  http
+    .get(config.API.salaryEmployeeChartByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      formData.name = data.name;
+      formData.group = data.group;
+      formData.isActive = data.isActive;
+      formData.date = data.date;
+      formData.startDate = data.startDate;
+      formData.endDate = data.endDate;
+      formData.details = data.details;
+      isReadonly.value = data.isActive ? true : false;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 const isReadonly = ref<boolean>(false);
 function onClickSubmit() {
   const hasError = [];
@@ -62,8 +91,21 @@ function onClickSubmit() {
   }
 }
 
-function onSubmit() {
-  console.log(props.isStatusEdit);
+async function onSubmit() {
+  showLoader();
+  try {
+    const url = !props.isStatusEdit
+      ? config.API.salaryEmployeeChart
+      : config.API.salaryEmployeeChartByid(props.data.id);
+    await http[!props.isStatusEdit ? "post" : "put"](url, formData);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    props.fetchData?.();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+    closeDialog();
+  }
 }
 
 function closeDialog() {
@@ -94,16 +136,7 @@ watch(
   () => modal.value,
   () => {
     if (modal.value && props.isStatusEdit) {
-      console.log(props.data);
-      const data = props.data;
-      formData.name = data.name;
-      formData.group = data.group;
-      formData.isActive = data.isActive;
-      formData.date = data.date;
-      formData.startDate = null;
-      formData.endDate = null;
-      formData.details = "";
-      isReadonly.value = data.isActive ? true : false;
+      fetchSalaryDetail(props.data.id);
     }
   }
 );
@@ -112,7 +145,14 @@ watch(
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 80%">
       <form @submit.prevent.stop="onClickSubmit">
-        <Header tittle="test" :close="closeDialog" />
+        <Header
+          :tittle="
+            props.isStatusEdit
+              ? 'แก้ไขผังบัญชีค่าจ้างลูกจ้างประจำ'
+              : 'เพิ่มผังบัญชีค่าจ้างลูกจ้างประจำ'
+          "
+          :close="closeDialog"
+        />
         <q-separator />
         <q-card-section class="scroll" style="max-height: 70vh">
           <div class="row col-12 q-col-gutter-sm">
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
index c26eb4779..0a0aad81c 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computed, ref, reactive, watch } from "vue";
+import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { ObjectSalaryRateRef } from "@/modules/13_salary/interface/index/Main";
+import type { ObjectReteRef } from "@/modules/13_salary/interface/index/EmployeeChart";
+import type { FormDataRate } from "@/modules/13_salary/interface/request/EmployeeChart";
 
 import Header from "@/components/DialogHeader.vue";
 
@@ -22,7 +23,7 @@ const {
   success,
 } = useCounterMixin();
 
-const salaryId = ref<string>(route.params.id.toString());
+const salaryEmployeeId = ref<string>(route.params.id.toString());
 
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
@@ -34,6 +35,10 @@ const props = defineProps({
     type: Object,
     defult: [],
   },
+  fetchData: {
+    type: Function,
+    required: true,
+  },
 });
 
 const formData = reactive<any>({
@@ -47,7 +52,7 @@ const salaryNoRef = ref<Object | null>(null);
 const salaryMonthRef = ref<Object | null>(null);
 const salaryDayRef = ref<Object | null>(null);
 
-const ObjectRef: any = {
+const ObjectRef: ObjectReteRef = {
   salaryNo: salaryNoRef,
   salaryMonth: salaryMonthRef,
   salaryDay: salaryDayRef,
@@ -65,7 +70,6 @@ function clearFormData() {
 }
 
 function onClickSubmit() {
-  console.log(formData.salaryHalfSpecial);
   const hasError = [];
   for (const key in ObjectRef) {
     if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
@@ -82,30 +86,57 @@ function onClickSubmit() {
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
-    closeDialog();
+  dialogConfirm($q, async () => {
+    showLoader();
+    const body: FormDataRate = {
+      salaryEmployeeId: !props.isStatusEdit
+        ? salaryEmployeeId.value
+        : undefined,
+      step:
+        typeof formData.salaryNo === "number"
+          ? formData.salaryNo
+          : Number(formData.salaryNo.replace(/,/g, "")),
+
+      salaryMonth:
+        typeof formData.salaryMonth === "number"
+          ? formData.salaryMonth
+          : Number(formData.salaryMonth.replace(/,/g, "")), //*เงินเดือนฐาน
+
+      salaryDay:
+        typeof formData.salaryDay === "number"
+          ? formData.salaryDay
+          : Number(formData.salaryDay.replace(/,/g, "")), //0.5 ขั้น
+    };
+    try {
+      const url = !props.isStatusEdit
+        ? config.API.salaryEmployeeRateList
+        : config.API.salaryEmployeeRateListByid(props?.data?.id);
+      await http[!props.isStatusEdit ? "post" : "put"](url, body);
+      success($q, "บันทีกข้อมูลสำเร็จ");
+      props.fetchData?.();
+    } catch (err) {
+      messageError($q, err);
+      hideLoader();
+    } finally {
+      closeDialog();
+    }
   });
 }
 
-// watch(
-//   () => modal.value,
-//   () => {
-//     if (modal.value && props.typeAction === "edit") {
-//       if (props.data) {
-//         const data = props.data;
-//         formData.salaryId = data.id;
-//         formData.salary = data.salary;
-//         formData.salaryHalf = data.salaryHalf;
-//         formData.salaryHalfSpecial = data.salaryHalfSpecial;
-//         formData.salaryFull = data.salaryFull;
-//         formData.salaryFullSpecial = data.salaryFullSpecial;
-//         formData.salaryFullHalf = data.salaryFullHalf;
-//         formData.salaryFullHalfSpecial = data.salaryFullHalfSpecial;
-//         formData.isNext = data.isNext;
-//       }
-//     }
-//   }
-// );
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value && props.isStatusEdit) {
+      if (props.data) {
+        const data = props.data;
+        console.log(data);
+        formData.salaryNo = data.step;
+        formData.salaryMonth = data.salaryMonth;
+        formData.salaryDay = data.salaryDay;
+      }
+    }
+  }
+);
 </script>
 
 <template>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue
new file mode 100644
index 000000000..09227df7a
--- /dev/null
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import Header from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  id: {
+    type: String,
+    defult: "",
+  },
+  isActive: {
+    type: Boolean,
+    defult: false,
+  },
+});
+
+const salaryId = ref<string>("");
+
+const documentFile = ref<any>(null);
+const itemsDocument = ref<any>([]);
+
+async function fetchDocumentFile(id: string) {
+  showLoader();
+  await http
+    .get(config.API.salaryEmployeeChartFile(id))
+    .then((res) => {
+      const list = res.data.map((e: any) => ({ name: e.fileName }));
+      itemsDocument.value = list;
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      if (props.id) {
+        salaryId.value = props.id;
+        await fetchDocumentFile(props.id);
+      }
+    }
+  }
+);
+
+function closeDialog() {
+  modal.value = !modal.value;
+}
+
+async function uploadDocumentFile() {
+  const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
+  showLoader();
+  const formData = new FormData();
+  formData.append("file", documentFile.value);
+  const body = {
+    replace: false,
+    fileList: {
+      fileName: fileName,
+    },
+  };
+  await http
+    .post(config.API.salaryEmployeeChartFile(salaryId.value), body)
+    .then((res) => {
+      console.log(res);
+      const foundKey: any = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      const link = res.data[foundKey]?.uploadUrl;
+      fileUpLoad(link);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+/**
+ * function อัปโหลดไฟล์
+ * @param url link อัปโหลด
+ */
+function fileUpLoad(url: string) {
+  axios
+    .put(url, documentFile.value, {
+      headers: { "Content-Type": documentFile.value?.type },
+      onUploadProgress: (e) => console.log(e),
+    })
+    .then(() => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      documentFile.value = null;
+      fetchDocumentFile(salaryId.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onClickDeleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.salaryEmployeeChartDelFile(salaryId.value, fileName))
+      .then(() => {
+        setTimeout(() => {
+          fetchDocumentFile(salaryId.value);
+          success($q, "ลบไฟล์สำเร็จ");
+        }, 1000);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        setTimeout(() => {
+          hideLoader();
+        }, 1000);
+      });
+  });
+}
+
+async function onClickDonwload(fileName: string) {
+  showLoader();
+  await http
+    .get(config.API.salaryEmployeeChartDelFile(salaryId.value, fileName))
+    .then((res) => {
+      const data = res.data;
+      downloadFile(data.downloadUrl, data.fileType, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function เรียกไฟล์ PDF
+ * @param url  link PDF
+ * @param type  ประเภทไฟล์
+ * @param fileName  ชือไฟล์
+ */
+async function downloadFile(url: string, type: string, fileName: string) {
+  await axios
+    .get(url, {
+      method: "GET",
+      responseType: "blob",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
+      },
+    })
+    .then(async (res) => {
+      const a = document.createElement("a");
+      a.href = window.URL.createObjectURL(res.data);
+      a.download = fileName;
+      a.click();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <Header :tittle="`อัปโหลดเอกสารอ้างอิง`" :close="closeDialog" />
+      <q-separator />
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-md-12">
+            <div class="col-xs-12 col-md-3">
+              <div class="row col-12 q-col-gutter-y-sm">
+                <div class="col-12 row">
+                  <div v-if="!props.isActive" class="full-width">
+                    <q-file
+                      class="col-12"
+                      outlined
+                      dense
+                      v-model="documentFile"
+                      label="เอกสารอ้างอิง"
+                      hide-bottom-space
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" color="primary" />
+                      </template>
+                      <template v-slot:after>
+                        <q-btn
+                          v-if="documentFile"
+                          size="14px"
+                          flat
+                          round
+                          dense
+                          color="add"
+                          icon="mdi-upload"
+                          @click="uploadDocumentFile"
+                          ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                        >
+                      </template>
+                    </q-file>
+                  </div>
+                </div>
+
+                <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
+                  <q-list class="full-width rounded-borders" bordered separator>
+                    <q-item
+                      v-for="file in itemsDocument"
+                      :key="file.id"
+                      clickable
+                      v-ripple
+                    >
+                      <q-item-section>{{ file.name }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row q-col-gutter-md">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                              @click="onClickDonwload(file.name)"
+                            >
+                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div v-if="!props.isActive">
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              @click="onClickDeleteFile(file.name)"
+                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                            >
+                          </div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+
+                <div class="col-12" v-else>
+                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
index 7f890393c..a8acc6c20 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
+import type {
+  ItemsMenu,
+  NewPagination,
+} from "@/modules/13_salary/interface/index/Main";
+import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeChart";
+import type { EmployeeSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
 
 /** importComponents*/
 import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue";
+import DialogEmployeeUpload from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -25,11 +33,12 @@ const {
   success,
 } = useCounterMixin();
 
-const formFilter = reactive({
+const formFilter = reactive<FormFilter>({
   page: 1,
   pageSize: 10,
   keyword: "",
 });
+const maxPage = ref<number>(1);
 
 /** ข้อมูล Table*/
 const columns = ref<QTableProps["columns"]>([
@@ -70,27 +79,9 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any>([
-  {
-    id: "1",
-    name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 1",
-    group: 1,
-    date: new Date(),
-    isActive: true,
-  },
-  {
-    id: "2",
-    name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 2",
-    group: 2,
-    date: new Date(),
-    isActive: false,
-  },
-]);
+const rows = ref<EmployeeSalary[]>([]);
 const visibleColumns = ref<string[]>(["name", "group", "date", "isActive"]);
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
+
 /** List Mune*/
 const itemMenu = ref<ItemsMenu[]>([
   {
@@ -119,18 +110,37 @@ const itemMenu = ref<ItemsMenu[]>([
   },
 ]);
 
-function onClickAction(type: string, data: any) {
+function fetchListChart() {
+  showLoader();
+  http
+    .get(
+      config.API.salaryEmployeeChart +
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
+    )
+    .then((res) => {
+      rows.value = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onClickAction(type: string, data: EmployeeSalary) {
   switch (type) {
     case "edit":
       onEdit(data);
       break;
     case "upload":
-      onUpload();
+      onUpload(data.id, data.isActive);
       break;
     case "salaryRate":
       onSalaryRate(data.id);
       break;
-    case "coppy":
+    case "copy":
       onCoppy(data.id);
       break;
 
@@ -139,30 +149,83 @@ function onClickAction(type: string, data: any) {
   }
 }
 
-function onEdit(data: any) {
+function onEdit(data: EmployeeSalary) {
   modalDialogEmployeeChart.value = true;
   isStatusEdit.value = true;
   dataRow.value = data;
 }
 
-function onUpload() {}
+const modalDialogUpload = ref<boolean>(false);
+const salaryChartId = ref<string>("");
+const isActive = ref<boolean>(false);
+function onUpload(id: string, status: boolean) {
+  modalDialogUpload.value = true;
+  salaryChartId.value = id;
+  isActive.value = status;
+}
 
 function onSalaryRate(id: string) {
   router.push(`/salary-employee/rate/${id}`);
 }
 
-function onCoppy(id: string) {}
+function onCoppy(id: string) {
+  http
+    .post(config.API.salaryEmployeeChartCopy, { id: id })
+    .then(() => {
+      fetchListChart();
+      success($q, "คัดลอกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
 function onClickDelete(id: string) {
-  dialogRemove($q, () => {});
+  dialogRemove($q, () => {
+    http
+      .delete(config.API.salaryEmployeeChartByid(id))
+      .then(() => {
+        fetchListChart();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  });
 }
 
 const modalDialogEmployeeChart = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
-const dataRow = ref<any>();
+const dataRow = ref<EmployeeSalary>();
 function onClickAdd() {
   modalDialogEmployeeChart.value = true;
   isStatusEdit.value = false;
 }
+
+function filterFn() {
+  formFilter.page = 1;
+  fetchListChart();
+}
+
+function updatePage(val: number) {
+  formFilter.page = val;
+  fetchListChart();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    fetchListChart();
+  }
+);
+
+onMounted(() => {
+  fetchListChart();
+});
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
@@ -173,10 +236,10 @@ function onClickAdd() {
     <q-input
       borderless
       dense
-      debounce="300"
       outlined
       v-model="formFilter.keyword"
       placeholder="ค้นหา"
+      @keydown.enter.pervrnt="filterFn"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -206,9 +269,9 @@ function onClickAdd() {
     :rows="rows"
     :columns="columns"
     row-key="name"
-    v-model:pagination="pagination"
     :rows-per-page-options="[10, 20, 50, 100]"
     :visible-columns="visibleColumns"
+    @update:pagination="updatePageSize"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -290,11 +353,12 @@ function onClickAdd() {
         v-model="formFilter.page"
         active-color="primary"
         color="dark"
-        :max="1"
+        :max="maxPage"
         :max-pages="5"
         size="sm"
         boundary-links
         direction-links
+        @update:model-value="updatePage"
       ></q-pagination>
     </template>
   </d-table>
@@ -302,7 +366,14 @@ function onClickAdd() {
   <DialogEmployeeChart
     v-model:modal="modalDialogEmployeeChart"
     :isStatusEdit="isStatusEdit"
-    :data="dataRow"
+    :data="dataRow as EmployeeSalary"
+    :fetchData="fetchListChart"
+  />
+
+  <DialogEmployeeUpload
+    v-model:modal="modalDialogUpload"
+    :id="salaryChartId"
+    :isActive="isActive"
   />
 </template>
 
diff --git a/src/modules/13_salary/interface/index/EmployeeChart.ts b/src/modules/13_salary/interface/index/EmployeeChart.ts
index 12978b628..7755909e9 100644
--- a/src/modules/13_salary/interface/index/EmployeeChart.ts
+++ b/src/modules/13_salary/interface/index/EmployeeChart.ts
@@ -4,4 +4,12 @@ interface ObjectCharRef {
 
   [key: string]: any;
 }
-export type { ObjectCharRef };
+
+interface ObjectReteRef {
+  salaryNo: object | null;
+  salaryMonth: object | null;
+  salaryDay: object | null;
+
+  [key: string]: any;
+}
+export type { ObjectCharRef, ObjectReteRef };
diff --git a/src/modules/13_salary/interface/request/EmployeeChart.ts b/src/modules/13_salary/interface/request/EmployeeChart.ts
index 5c4882412..f90164ea8 100644
--- a/src/modules/13_salary/interface/request/EmployeeChart.ts
+++ b/src/modules/13_salary/interface/request/EmployeeChart.ts
@@ -7,4 +7,18 @@ interface FormDataChar {
   endDate: Date | null; //วันที่สิ้นสุดบังคับใช้
   details: string; //คำอธิบาย
 }
-export type { FormDataChar };
+
+interface FormFilter {
+  page: number;
+  pageSize: number;
+  keyword: string;
+}
+
+interface FormDataRate {
+  salaryEmployeeId: string | undefined;
+  step: number;
+  salaryMonth: number;
+  salaryDay: number;
+}
+
+export type { FormDataChar, FormFilter, FormDataRate };
diff --git a/src/modules/13_salary/interface/response/salaryEmployeeChart.ts b/src/modules/13_salary/interface/response/salaryEmployeeChart.ts
new file mode 100644
index 000000000..1d84ff0d1
--- /dev/null
+++ b/src/modules/13_salary/interface/response/salaryEmployeeChart.ts
@@ -0,0 +1,17 @@
+interface EmployeeSalary {
+  date: Date;
+  details: string;
+  endDate: Date;
+  group: number;
+  id: string;
+  isActive: boolean;
+  name: string;
+  startDate: Date;
+}
+interface EmployeeRateSalary {
+  id: string;
+  salaryDay: number;
+  salaryMonth: number;
+  step: number;
+}
+export type { EmployeeSalary, EmployeeRateSalary };
diff --git a/src/modules/13_salary/views/salaryEmployeeRate.vue b/src/modules/13_salary/views/salaryEmployeeRate.vue
index 288726d0c..cc0b31191 100644
--- a/src/modules/13_salary/views/salaryEmployeeRate.vue
+++ b/src/modules/13_salary/views/salaryEmployeeRate.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
+import type {
+  ItemsMenu,
+  NewPagination,
+} from "@/modules/13_salary/interface/index/Main";
+import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeChart";
+import type { EmployeeRateSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
 
 /** importComponts*/
 import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue";
@@ -14,49 +21,46 @@ import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeCha
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
+const route = useRoute();
 const router = useRouter();
 const $q = useQuasar();
 const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
+const salaryEmployeeId = ref<string>(route.params.id.toString());
+
 /** ข้อมูล Table*/
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "no",
+    name: "step",
     align: "left",
     label: "ลำดับขั้น",
     sortable: true,
-    field: "no",
+    field: "step",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "month",
+    name: "salaryMonth",
     align: "left",
     label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายเดือน)",
     sortable: true,
-    field: "month",
+    field: "salaryMonth",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "day",
+    name: "salaryDay",
     align: "left",
     label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายวัน)",
     sortable: true,
-    field: "day",
+    field: "salaryDay",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any>([
-  {
-    no: "1",
-    month: 100000,
-    day: 5000,
-  },
-]);
-const visibleColumns = ref<string[]>(["no", "month", "day"]);
+const rows = ref<EmployeeRateSalary[]>([]);
+const visibleColumns = ref<string[]>(["step", "salaryMonth", "salaryDay"]);
 
 /** List Mune*/
 const itemMenu = ref<ItemsMenu[]>([
@@ -75,26 +79,48 @@ const itemMenu = ref<ItemsMenu[]>([
   },
 ]);
 
-const formFilter = reactive({
+const formFilter = reactive<FormFilter>({
   page: 1,
   pageSize: 10,
   keyword: "",
 });
+const maxPage = ref<number>(1);
+
 const pagination = ref({
   page: formFilter.page,
   rowsPerPage: formFilter.pageSize,
 });
 
+function fetchSalalyEmployeeRate() {
+  showLoader();
+  http
+    .get(
+      config.API.salaryEmployeeRateListByid(salaryEmployeeId.value) +
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
+    )
+    .then((res) => {
+      rows.value = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 const modalDialogEmployeeRate = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
+const dataRow = ref<EmployeeRateSalary>();
 
-function onClickAction(type: string, data: any) {
+function onClickAction(type: string, data: EmployeeRateSalary) {
   switch (type) {
     case "edit":
-      onEdit();
+      onEdit(data);
       break;
     case "delete":
-      onDelete();
+      onDelete(data.id);
       break;
 
     default:
@@ -102,19 +128,58 @@ function onClickAction(type: string, data: any) {
   }
 }
 
-function onEdit() {
+function onEdit(data: EmployeeRateSalary) {
   modalDialogEmployeeRate.value = true;
   isStatusEdit.value = true;
+  dataRow.value = data;
 }
 
-function onDelete() {
-  dialogRemove($q, () => {});
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    http
+      .delete(config.API.salaryEmployeeRateListByid(id))
+      .then(() => {
+        fetchSalalyEmployeeRate();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      })
+      .finally(() => {});
+  });
 }
 
 function onClickAdd() {
   modalDialogEmployeeRate.value = true;
   isStatusEdit.value = false;
 }
+
+function filterFn() {
+  formFilter.page = 1;
+  fetchSalalyEmployeeRate();
+}
+
+function updatePage(val: number) {
+  formFilter.page = val;
+  fetchSalalyEmployeeRate();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    fetchSalalyEmployeeRate();
+  }
+);
+
+onMounted(() => {
+  fetchSalalyEmployeeRate();
+});
 </script>
 <template>
   <div class="row items-center">
@@ -141,9 +206,9 @@ function onClickAdd() {
       <q-input
         borderless
         dense
-        debounce="300"
         outlined
         v-model="formFilter.keyword"
+        @keydown.enter.pervrnt="filterFn"
         placeholder="ค้นหา"
       >
         <template v-slot:append>
@@ -175,9 +240,9 @@ function onClickAdd() {
         :rows="rows"
         :columns="columns"
         row-key="name"
-        v-model:pagination="pagination"
         :rows-per-page-options="[10, 20, 50, 100]"
         :visible-columns="visibleColumns"
+        @update:pagination="updatePageSize"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -191,10 +256,10 @@ function onClickAdd() {
         <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 === 'month'">
+              <div v-if="col.name === 'salaryMonth'">
                 {{ col.value ? col.value.toLocaleString() : "-" }}
               </div>
-              <div v-else-if="col.name === 'day'">
+              <div v-else-if="col.name === 'salaryDay'">
                 {{ col.value ? col.value.toLocaleString() : "-" }}
               </div>
               <div v-else>{{ col.value ? col.value : "-" }}</div>
@@ -239,11 +304,12 @@ function onClickAdd() {
             v-model="formFilter.page"
             active-color="primary"
             color="dark"
-            :max="1"
+            :max="maxPage"
             :max-pages="5"
             size="sm"
             boundary-links
             direction-links
+            @update:model-value="updatePage"
           ></q-pagination>
         </template>
       </d-table>
@@ -253,6 +319,8 @@ function onClickAdd() {
   <DialogEmployeeRate
     v-model:modal="modalDialogEmployeeRate"
     :isStatusEdit="isStatusEdit"
+    :fetchData="fetchSalalyEmployeeRate"
+    :data="dataRow as EmployeeRateSalary"
   />
 </template>