fix(01): bank icon & separator

public/option/option.json

@@ -23,7 +23,7 @@
       },
       {
         "label": "UOB Bank",
-        "value": "uobt"
+        "value": "uob"
       },
       {
         "label": "Krungsri Bank",
@@ -807,7 +807,7 @@
       },
       {
         "label": "ธนาคารยูโอบี",
-        "value": "uobt"
+        "value": "uob"
       },
       {
         "label": "ธนาคารกรุงศรีอยุธยา",

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

@@ -95,6 +95,12 @@ watch(
       :class="{ 'q-pt-lg': i !== 0 }"
       :key="i"
     >
+      <q-separator
+        v-if="i > 0"
+        class="full-width"
+        style="padding-block: 0.1px"
+        spaced="lg"
+      />
       <span class="col-12 app-text-muted-2 flex justify-between items-center">
         {{ `${$t('bankBookNo')} ${i + 1}` }}
         <q-btn
@@ -130,6 +136,25 @@ watch(
         for="select-bankbook"
         @filter="bankBoookFilter"
       >
+        <template v-slot:option="scope">
+          <q-item
+            v-if="scope.opt"
+            v-bind="scope.itemProps"
+            class="row items-center col-12"
+          >
+            <q-item-section avatar>
+              <q-img
+                :src="`/img/bank/${scope.opt.value}.png`"
+                class="bordered"
+                style="border-radius: 50%"
+              />
+            </q-item-section>
+            <q-item-section>
+              {{ scope.opt.label }}
+            </q-item-section>
+          </q-item>
+        </template>
+
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">