feat:add btn delete

src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue

@@ -35,6 +35,7 @@ const {
   hideLoader,
   pathRegistryEmp,
   onSearchDataTable,
+  dialogRemove,
 } = useCounterMixin();
 
 /** props*/
@@ -189,8 +190,8 @@ async function fetchData(id: string) {
   await http
     .get(config.API.profileNewChangeNameByProfileId(id, empType.value))
     .then(async (res) => {
-      rows.value = await res.data.result;
       rowsMain.value = await res.data.result;
+      searchDataTable();
     })
     .catch((err) => {
       messageError($q, err);
@@ -358,7 +359,7 @@ function closeDialog() {
 }
 
 /** ฟังก์ค้นหาข้อมูลรายการประวัติการเปลีียนชื่อ-นามสกุล*/
-function serchDataTable() {
+function searchDataTable() {
   rows.value = onSearchDataTable(
     filterSearch.value,
     rowsMain.value,
@@ -366,6 +367,21 @@ function serchDataTable() {
   );
 }
 
+function handleDelete(id: string) {
+  // dialogRemove($q, async () => {
+  //   showLoader();
+  //   try {
+  //     await http.delete(config.API.รอAPI + `/${id}`);
+  //     await fetchData(profileId.value);
+  //     success($q, "ลบข้อมูลสำเร็จ");
+  //   } catch (err) {
+  //     messageError($q, err);
+  //   } finally {
+  //     hideLoader();
+  //   }
+  // });
+}
+
 /** ดูการเปลี่ยนแปลงของข้อมูลฟอร์ท เปลี่ยนชื่อ-นามสกุล*/
 watch(
   () => [
@@ -450,7 +466,7 @@ onMounted(async () => {
       label="ค้นหา"
       class="q-mr-sm"
       v-model="filterSearch"
-      @keydown.enter.prevent="serchDataTable"
+      @keydown.enter.prevent="searchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -486,6 +502,7 @@ onMounted(async () => {
   >
     <template v-slot:header="props">
       <q-tr :props="props">
+        <q-th auto-width />
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
@@ -495,6 +512,19 @@ onMounted(async () => {
 
     <template v-slot:body="props">
       <q-tr :props="props">
+        <q-td auto-width>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsDelete"
+            color="red"
+            flat
+            dense
+            round
+            icon="delete"
+            @click="handleDelete(props.row.id)"
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+        </q-td>
         <q-td
           v-for="(col, index) in props.cols"
           :key="col.name"