changes

app/components/datatable/TableOption.vue

@@ -3,8 +3,7 @@
     <thead>
       <tr class="fs-14">
         <th class="is-narrow">#</th>
-        <th>Tên trường</th>
-        <th>Tên cột</th>
+        <th>Tên</th>
         <th class="is-narrow has-text-right">Thao tác</th>
       </tr>
     </thead>
@@ -13,16 +12,12 @@
         class="fs-14"
         v-for="(v, i) in fields"
       >
-        <td style="vertical-align: middle">{{ i }}</td>
-        <td style="vertical-align: middle">
-          <a
-            class="has-text-primary"
-            @click="openField(v, i)"
-            >{{ v.name }}</a
-          >
-        </td>
-        <td style="vertical-align: middle">{{ $stripHtml(v.label, 50) }}</td>
+        <td>{{ i }}</td>
         <td>
+          <p>{{ $stripHtml(v.label, 50) }}</p>
+          <a @click="openField(v, i)">{{ v.name }}</a>
+        </td>
+        <td style="vertical-align: middle">
           <div class="field has-addons">
             <p class="control">
               <button
@@ -69,12 +64,12 @@
     </tbody>
   </table>
   <Modal
+    v-if="showmodal"
+    v-bind="showmodal"
     @close="showmodal = undefined"
     @update="update"
     @confirm="remove"
-    v-bind="showmodal"
-    v-if="showmodal"
-  ></Modal>
+  />
 </template>
 <script setup>
 import { cloneDeep } from "es-toolkit";
@@ -94,7 +89,7 @@ function openField(v, i) {
     component: "datatable/FieldAttribute",
     title: `${v.name} / ${$stripHtml(v.label)}`,
     width: "50%",
-    height: "400px",
+    height: "500px",
     vbind: { field: v },
   };
 }
@@ -124,13 +119,13 @@ function moveUp(v, i) {
   updateField();
 }
 function askConfirm(v, i) {
-  current = { v: v, i: i };
+  current = { v, i };
   showmodal.value = {
-    component: `dialog/Confirm`,
-    vbind: { content: "Bạn có muốn xóa cột này không?", duration: 10 },
+    component: "dialog/Confirm",
+    vbind: { content: `Bạn có muốn xóa cột <span class="tag">${v.name}</span> không?` },
     title: "Xóa cột",
     width: "500px",
-    height: "100px",
+    height: "auto",
   };
 }
 function remove() {