API ลบรายการประเมิน

src/api/evaluate/api.evaluate.ts

@@ -4,6 +4,7 @@ const evaluation = `${env.API_URI}/evaluation`;
 
 export default {
   evaluationList: () => `${evaluation}/user`,
+  evaluationByid: (id: string) => `${evaluation}/${id}`,
   evaluationCheckStatus: () => `${evaluation}/check-status`,
   evaluationCheckStep: (id: string) => `${evaluation}/check/${id}`,
   evaluationCheckById: (id: string) => `${evaluation}/check/${id}`,

src/modules/06_evaluate/components/TableListEvaluate.vue

@@ -1,17 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 /**import Type */
 import type { QTableProps } from "quasar";
 
 /** import Store */
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const store = useEvaluateStore();
+const mixin = useCounterMixin();
+const $q = useQuasar();
 const router = useRouter();
 
+const { dialogRemove, showLoader, hideLoader, success, messageError } = mixin;
+
 const props = defineProps({
   page: {
     type: Number,
@@ -25,6 +33,10 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  fetchData: {
+    type: Function,
+    require: true,
+  },
 });
 
 const emit = defineEmits(["update:pagination"]);
@@ -57,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "dateSend",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px; ",
+    style: "font-size: 14px;",
   },
   {
     name: "status",
@@ -97,6 +109,28 @@ function updateRowsPerPagen(newPagination: any) {
   currentPage.value = 1;
 }
 
+/**
+ * function ลบรายการประเมิน
+ * @param id รายการประเมิน
+ */
+async function onCkilckDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.evaluationByid(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      })
+      .finally(() => {
+        props.fetchData?.();
+      });
+  });
+}
+
 /**
  * function redireact ไปยังหน้ารายละเอียด
  * @param data ข้อมูล row
@@ -136,6 +170,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium" v-html="col.label" />
         </q-th>
+        <q-th></q-th>
       </q-tr>
     </template>
     <template v-slot:body="props">
@@ -153,6 +188,18 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
             {{ col.value }}
           </div>
         </q-td>
+        <q-td>
+          <q-btn
+            flat
+            dense
+            round
+            color="red"
+            icon="delete"
+            @click.stop="onCkilckDelete(props.row.id)"
+          >
+            <q-tooltip>ลบ</q-tooltip>
+          </q-btn>
+        </q-td>
       </q-tr>
     </template>
     <template v-slot:pagination="scope">

src/modules/06_evaluate/views/EvaluateMain.vue

@@ -320,7 +320,12 @@ watch(
     </div>
   </div>
 
-  <DialogMain :modal="modal" :menu="menu" :close="onclickAddEvaluate" />
+  <DialogMain
+    :modal="modal"
+    :menu="menu"
+    :close="onclickAddEvaluate"
+    :fetchData="fetchEvaluteList"
+  />
 </template>
 
 <style lang="scss" scoped></style>