refactor(01): empty value show '-'

src/components/01_branch-management/FormBank.vue

@@ -144,7 +144,6 @@ watch(
         option-value="value"
         input-debounce="0"
         option-label="label"
-        v-model="book.bankName"
         lazy-rules="ondemand"
         class="col-3"
         :dense="dense"
@@ -153,7 +152,12 @@ watch(
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
         for="select-bankbook"
+        :model-value="readonly ? book.bankName || '-' : book.bankName"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (book.bankName = v) : '')
+        "
         @filter="bankBoookFilter"
+        @clear="book.bankName = ''"
       >
         <template v-slot:option="scope">
           <q-item
@@ -175,7 +179,11 @@ watch(
         </template>
 
         <template v-slot:selected-item="scope">
-          <q-item-section v-if="scope.opt" avatar class="q-py-sm">
+          <q-item-section
+            v-if="scope.opt && book.bankName"
+            avatar
+            class="q-py-sm"
+          >
             <q-img
               :src="`/img/bank/${scope.opt.value}.png`"
               class="bordered"
@@ -198,7 +206,6 @@ watch(
         class="col-3"
         lazy-rules="ondemand"
         hide-bottom-space
-        v-model="book.accountNumber"
         :dense="dense"
         :readonly="readonly"
         :label="$t('accountNumber')"
@@ -208,6 +215,10 @@ watch(
             (val.length >= 7 && val.length <= 13) ||
             $t('form.error.please', { msg: $t('accountNumber') }),
         ]"
+        :model-value="readonly ? book.accountNumber || '-' : book.accountNumber"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (book.accountNumber = v) : '')
+        "
       />
       <q-input
         outlined
@@ -215,10 +226,13 @@ watch(
         class="col-3"
         lazy-rules="ondemand"
         hide-bottom-space
-        v-model="book.bankBranch"
         :dense="dense"
         :readonly="readonly"
         :label="$t('bankBranch')"
+        :model-value="readonly ? book.bankBranch || '-' : book.bankBranch"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (book.bankBranch = v) : '')
+        "
       />
       <q-input
         outlined
@@ -226,10 +240,13 @@ watch(
         class="col-3"
         lazy-rules="ondemand"
         hide-bottom-space
-        v-model="book.accountName"
         :dense="dense"
         :readonly="readonly"
         :label="$t('accountName')"
+        :model-value="readonly ? book.accountName || '-' : book.accountName"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (book.accountName = v) : '')
+        "
       />
       <q-select
         outlined
@@ -243,7 +260,6 @@ watch(
         option-value="value"
         input-debounce="0"
         option-label="label"
-        v-model="book.accountType"
         lazy-rules="ondemand"
         class="col-4"
         :dense="dense"
@@ -252,7 +268,12 @@ watch(
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
         for="select-bankbook"
+        :model-value="readonly ? book.accountType || '-' : book.accountType"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (book.accountType = v) : '')
+        "
         @filter="accountTypeFilter"
+        @clear="book.accountType = ''"
       >
         <template v-slot:no-option>
           <q-item>

src/components/01_branch-management/FormBranchContact.vue

@@ -42,8 +42,9 @@ defineProps<{
             ? $t('formDialogInputEmailHq')
             : $t('formDialogInputEmailSubBranch')
         "
-        v-model="email"
         for="input-email"
+        :model-value="readonly ? email || '-' : email"
+        @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
       >
         <template #prepend>
           <q-icon
@@ -67,8 +68,11 @@ defineProps<{
             ? $t('formDialogInputTelephoneHq')
             : $t('formDialogInputTelephoneSubBranch')
         "
-        v-model="telephoneNo"
         for="input-telephone-no"
+        :model-value="readonly ? telephoneNo || '-' : telephoneNo"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (telephoneNo = v) : '')
+        "
       >
         <template #prepend>
           <q-icon
@@ -88,8 +92,9 @@ defineProps<{
         hide-bottom-space
         class="col-3"
         label="Line ID"
-        v-model="lineId"
         for="input-line-id"
+        :model-value="readonly ? lineId || '-' : lineId"
+        @update:model-value="(v) => (typeof v === 'string' ? (lineId = v) : '')"
       />
 
       <div class="col-12 row q-col-gutter-sm">
@@ -101,8 +106,11 @@ defineProps<{
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputContactName')"
-          v-model="contactName"
           for="input-contact-name"
+          :model-value="readonly ? contactName || '-' : contactName"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (contactName = v) : '')
+          "
         />
 
         <q-input
@@ -113,8 +121,11 @@ defineProps<{
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputTelephoneContact')"
-          v-model="contact"
           for="input-contact"
+          :model-value="readonly ? contact || '-' : contact"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (contact = v) : '')
+          "
         >
           <template #prepend>
             <q-icon

src/pages/01_branch-management/MainPage.vue

@@ -329,7 +329,7 @@ async function fetchBranchById(id: string) {
       zipCode: res.zipCode,
       email: res.email,
       contactName: res.contactName,
-      contact: res.contact.length > 0 ? res.contact[0].telephoneNo : ' ',
+      contact: res.contact.length > 0 ? res.contact[0].telephoneNo : '',
       telephoneNo: res.telephoneNo,
       longitude: res.longitude,
       latitude: res.latitude,