แก้ไขตำแหน่งเงินเดือน

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

@@ -1,27 +1,21 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
-
+import { useCounterMixin } from "@/stores/mixin";
 import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
 
-const route = useRoute();
-const store = useEditPosDataStore();
-
-const empType = ref<string>(route.params.type.toString());
-const profileId = ref<string>(route.params.id.toString());
-
-const tabs = defineModel<string>("tabs", { required: true });
-
 import type { QTableColumn } from "quasar";
+import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
 
 import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
 
 const $q = useQuasar();
+const route = useRoute();
+const store = useEditPosDataStore();
 const {
   date2Thai,
   findOrgName,
@@ -33,11 +27,19 @@ const {
   success,
 } = useCounterMixin();
 
+const empType = ref<string>(route.params.type.toString());
+const profileId = ref<string>(route.params.id.toString());
+
+const tabs = defineModel<string>("tabs", { required: true });
+const statusCheckEdit = defineModel<string>("statusCheckEdit", {
+  required: true,
+});
+
 //Table
 const isLoad = ref<boolean>(true);
 const rowIndex = ref<number>(0);
-const rows = ref<any[]>([]);
-const rowsMain = ref<any[]>([]);
+const rows = ref<DataPosition[]>([]);
+const rowsMain = ref<DataPosition[]>([]);
 const keyword = ref<string>("");
 const baseColumns = ref<QTableColumn[]>([
   {
@@ -291,6 +293,7 @@ const columns = computed<QTableColumn[]>(() => {
 
 const modal = ref<boolean>(false);
 
+/** function fetch ข้อมูลรายการตำแหน่งเงินเดือน*/
 async function fetchData() {
   isLoad.value = true;
   rowsMain.value = [];
@@ -314,6 +317,7 @@ async function fetchData() {
     });
 }
 
+/** function ค้นหาข้อมูลรายการในตาราง*/
 function serchDataTable() {
   rows.value = onSearchDataTable(
     keyword.value,
@@ -322,6 +326,10 @@ function serchDataTable() {
   );
 }
 
+/**
+ * funciton
+ * @param index
+ */
 function onEditData(index: number) {
   rowIndex.value = index;
   modal.value = true;
@@ -342,11 +350,12 @@ async function onSwapData(action: string, id: string) {
     });
 }
 
-function onDeleteData(id: string) {
+function onDeleteData(id: string, isDelete: boolean) {
   dialogRemove($q, async () => {
     showLoader();
+    const path = isDelete ? "/delete-renew" : "/delete";
     await http
-      .post(config.API.salaryTemp + `/delete`, {
+      .post(config.API.salaryTemp + `${path}`, {
         type: empType.value,
         salaryId: id,
       })
@@ -436,7 +445,7 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props">
-            <q-td v-if="tabs === 'PENDING'">
+            <q-td v-if="tabs === 'PENDING' && statusCheckEdit !== 'CHECKED'">
               <q-btn
                 dense
                 flat
@@ -471,23 +480,28 @@ onMounted(() => {
                 flat
                 dense
                 round
-                icon="delete"
-                :color="props.row.isDelete ? 'grey' : 'red'"
-                :disable="props.row.isDelete"
-                @click.stop.pervent="onDeleteData(props.row.id)"
+                :icon="props.row.isDelete ? 'mdi-refresh-circle' : 'delete'"
+                :color="props.row.isDelete ? 'orange' : 'red'"
+                @click.stop.pervent="
+                  onDeleteData(props.row.id, props.row.isDelete)
+                "
               >
-                <q-tooltip>ลบ</q-tooltip>
+                <q-tooltip>{{
+                  props.row.isDelete ? "ย้อนกลับข้อมูล" : "ลบ"
+                }}</q-tooltip>
               </q-btn>
             </q-td>
             <q-td
               v-for="col in props.cols"
               :key="col.id"
               :class="
-                classColorRow(
-                  props.row.isDelete,
-                  props.row.isEdit,
-                  props.row.isEntry
-                )
+                tabs === 'PENDING'
+                  ? classColorRow(
+                      props.row.isDelete,
+                      props.row.isEdit,
+                      props.row.isEntry
+                    )
+                  : ''
               "
             >
               <div