refactor: edit layout bank

src/pages/05_quotation/peview/BankComponents.vue

@@ -21,6 +21,7 @@ let bankBookFilter: (
 
 defineProps<{
   bankBook: BankBook;
+  index: number;
 }>();
 
 watch(
@@ -36,132 +37,50 @@ watch(
 </script>
 
 <template>
-  <fieldset>
+  <fieldset class="rounded" style="border: 1px solid var(--gray-4)">
-    <legend>ช่องทางที่ 1</legend>
+    <legend>ช่องทางที่ {{ index + 1 }}</legend>
 
-    <div class="border-5 full-width row">
+    <div class="border-5 full-width row" style="gap: var(--size-4)">
-      <div class="col column flex flex-center q-pa-sm" style="width: 20%">
+      <div class="column q-pa-sm" style="width: fit-content">
-        <q-img class="text-center" src="/qrcode.png"></q-img>
+        <img
+          :src="bankBook.bankUrl"
+          class="rounded"
+          style="
+            border: 1px solid var(--gray-3);
+            object-fit: scale-down;
+            width: 1in;
+            height: 1in;
+          "
+        />
       </div>
-
+      <div class="column col" style="gap: var(--size-3)">
-      <div class="column" style="width: 80%">
+        <div class="row" style="justify-content: space-between">
-        <div class="row">
+          <div class="text-with-label">
-          <div class="col">
+            <div>เลขบัญชีธนาคาร</div>
-            <q-select
+            <div class="row items-start">
-              outlined
+              <img
-              clearable
+                width="25px"
-              use-input
+                height="25px"
-              emit-value
+                class="q-mr-xs"
-              fill-input
+                :src="`/img/bank/${bankBook.bankName}.png`"
-              map-options
+              />
-              hide-bottom-space
+              {{ bankBook.accountNumber }}
-              option-value="value"
+            </div>
-              input-debounce="0"
-              option-label="label"
-              class="col-12 col-md-4"
-              autocomplete="off"
-              dense
-              :label="$t('branch.form.bank')"
-              :options="bankBookOptions"
-              readonly
-              hide-dropdown-icon
-              for="select-bankbook"
-              :model-value="bankBook.bankName || '-'"
-              @update:model-value="
-                (v) => (typeof v === 'string' ? (bankBook.bankName = v) : '')
-              "
-              @filter="bankBookFilter"
-              @clear="bankBook.bankName = ''"
-            >
-              <template v-slot:option="scope">
-                <q-item
-                  v-if="scope.opt"
-                  v-bind="scope.itemProps"
-                  class="row items-center"
-                >
-                  <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:selected-item="scope">
-                <q-item-section
-                  v-if="scope.opt && bankBook.bankName"
-                  avatar
-                  class="q-py-sm"
-                >
-                  <q-img
-                    :src="`/img/bank/${scope.opt.value}.png`"
-                    class="bordered"
-                    style="border-radius: 50%"
-                  />
-                </q-item-section>
-              </template>
-
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    {{ $t('general.noData') }}
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
           </div>
-          <div class="col">
+          <div class="text-with-label">
-            <q-input
+            <div>เลขบัญชีธนาคาร</div>
-              outlined
+            <div>{{ bankBook.accountNumber }}</div>
-              for="input-bankbook"
-              class="col-12 col-md-4"
-              hide-bottom-space
-              dense
-              readonly
-              :label="$t('branch.form.bankAccountNumber')"
-              :maxlength="15"
-              :model-value="bankBook.accountNumber || '-'"
-              @update:model-value="
-                (v) =>
-                  typeof v === 'string' ? (bankBook.accountNumber = v) : ''
-              "
-            />
           </div>
-          <div class="col">
+          <div class="text-with-label">
-            <q-input
+            <div>ชื่อบัญชี</div>
-              outlined
+            <div>{{ bankBook.accountName }}</div>
-              for="input-bankbook"
-              class="col-12 col-md-4"
-              hide-bottom-space
-              dense
-              readonly
-              :label="$t('branch.form.bankAccountName')"
-              :model-value="bankBook.accountName || '-'"
-              @update:model-value="
-                (v) => (typeof v === 'string' ? (bankBook.accountName = v) : '')
-              "
-            />
           </div>
         </div>
         <div class="row">
-          <q-input
+          <div class="text-with-label">
-            outlined
+            <div>สาขา</div>
-            for="input-bankbook"
+            <div>{{ bankBook.bankBranch }}</div>
-            class="col-md-4 col-12"
+          </div>
-            hide-bottom-space
-            dense
-            readonly
-            :label="$t('branch.form.bankBranch')"
-            :model-value="bankBook.bankBranch || '-'"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (bankBook.bankBranch = v) : '')
-            "
-          />
         </div>
       </div>
     </div>
@@ -181,4 +100,14 @@ legend {
 .border-5 {
   border-radius: 5px;
 }
+
+.text-with-label {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  & > :first-child {
+    color: var(--gray-6);
+  }
+}
 </style>