API แก้ไขอัตรากำลัง

src/modules/02_organizationalNew/components/tableTree.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -14,11 +17,22 @@ import type { PosMaster2 } from "@/modules/02_organizationalNew/interface/respon
 import DialogFormPosotion from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
 import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
 import DialogSort from "@/modules/02_organizationalNew/components/DialogSortPosition.vue";
+
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+const { showLoader, hideLoader, messageError, success, dialogRemove } =
+  useCounterMixin();
+const $q = useQuasar();
 
 const props = defineProps({
   filterKeyword: { type: Function, require: true, default: () => {} },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+    default: () => {},
+  },
 });
 
 const dataSort = ref<Array<any>>([]);
@@ -35,18 +49,24 @@ const stroe = useOrganizational();
 const filter = ref<string>("");
 const actionType = ref<string>("");
 const listMenu = ref<ListMenu[]>([
-  {
-    label: "ดูรายละเอียด",
-    icon: "mdi-eye",
-    type: "VIEWDETIAL",
-    color: "primary",
-  },
   {
     label: "แก้ไข",
     icon: "edit",
     type: "EDIT",
     color: "primary",
   },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "DEL",
+    color: "red",
+  },
+  {
+    label: "ดูรายละเอียด",
+    icon: "mdi-eye",
+    type: "VIEWDETIAL",
+    color: "blue",
+  },
 ]);
 const document = ref<any>([
   {
@@ -194,7 +214,9 @@ const columnsExpand = ref<QTableProps["columns"]>([
 ]);
 
 const dialogPosition = ref<boolean>(false);
-function onClickPosition(type: string) {
+const rowId = ref<string>("");
+function onClickPosition(type: string, id: string) {
+  rowId.value = id;
   actionType.value = type;
   dialogPosition.value = !dialogPosition.value;
 }
@@ -204,6 +226,24 @@ function onClickViewDetail() {
   dialogDetail.value = !dialogDetail.value;
 }
 
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.orgPosMasterById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
 function onClickSort() {
   modalSort.value = true;
 }
@@ -223,7 +263,7 @@ function updatePagination(newPagination: NewPagination) {
           dense
           color="primary"
           icon="add"
-          @click="onClickPosition('ADD')"
+          @click="onClickPosition('ADD', '')"
         >
           <q-tooltip>เพิ่มตำแหน่ง</q-tooltip>
         </q-btn>
@@ -352,7 +392,9 @@ function updatePagination(newPagination: NewPagination) {
                       item.type === 'VIEWDETIAL'
                         ? onClickViewDetail()
                         : item.type === 'EDIT'
-                        ? onClickPosition('EDIT')
+                        ? onClickPosition('EDIT', props.row.id)
+                        : item.type === 'DEL'
+                        ? onClickDelete(props.row.id)
                         : null
                     "
                   >
@@ -466,11 +508,14 @@ function updatePagination(newPagination: NewPagination) {
     :orgLevel="orgLevel"
     :treeId="treeId"
     :actionType="actionType"
+    :rowId="rowId"
+    v-model:reqMaster="reqMaster"
+    :fetchDataTable="props.fetchDataTable"
   />
 
   <!-- รายละเอียดตำแหน่ง -->
   <DialogPositionDetail v-model:position-detail="dialogDetail" />
-  <DialogSort v-model:sort-position="modalSort"/>
+  <DialogSort v-model:sort-position="modalSort" />
 </template>
 
 <style lang="scss" scoped>