feat: Personnel drawer info edit, delete, undo

src/components/02_personnel-management/FormPerson.vue

@@ -25,8 +25,9 @@ defineProps<{
   <div class="col-9 row q-col-gutter-md">
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       label="ชื่อ ภาษาไทย"
@@ -35,8 +36,9 @@ defineProps<{
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       label="นามสกุล ภาษาไทย"
@@ -45,8 +47,9 @@ defineProps<{
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       label="ชื่อ ภาษาอังกฤษ"
@@ -55,8 +58,9 @@ defineProps<{
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       label="นามสกุล ภาษาอังกฤษ"
@@ -65,8 +69,9 @@ defineProps<{
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       class="col-6"
       label="เบอร์โทร"
       v-model="telephoneNo"
@@ -74,17 +79,19 @@ defineProps<{
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       label="อีเมล"
       class="col-6"
       v-model="email"
     />
     <q-select
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
       :hide-dropdown-icon="readonly"
+      :borderless="readonly"
       emit-value
       map-options
       label="เพศ"
@@ -110,8 +117,9 @@ defineProps<{
         <q-input
           label="วันเดือนปีเกิด"
           :dense="dense"
-          :outlined="outlined"
+          :outlined="readonly ? false : outlined"
           :readonly="readonly"
+          :borderless="readonly"
           :model-value="birthDate ? dateFormat(birthDate) : ''"
         >
           <template v-slot:prepend>
@@ -136,7 +144,8 @@ defineProps<{
     </VueDatePicker>
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
+      :borderless="readonly"
       readonly
       label="อายุ"
       class="col-3"