feat: bankbook & i18n

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

@@ -9,7 +9,12 @@ import type { QTableProps } from 'quasar';
 
 import useBranchStore from 'stores/branch';
 import useFlowStore from 'src/stores/flow';
-import { BranchWithChildren, BranchCreate, Branch } from 'stores/branch/types';
+import {
+  BranchWithChildren,
+  BranchCreate,
+  Branch,
+  BankBook,
+} from 'stores/branch/types';
 import { Status } from 'src/stores/types';
 
 import useUtilsStore, { dialog } from 'src/stores/utils';
@@ -29,6 +34,7 @@ import TreeCompoent from 'src/components/TreeCompoent.vue';
 import ProfileBanner from 'src/components/ProfileBanner.vue';
 import SideMenu from 'src/components/SideMenu.vue';
 import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
+import FormBank from 'src/components/01_branch-management/FormBank.vue';
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -70,11 +76,6 @@ const hideStat = ref(false);
 const currentStatus = ref<Status | 'All'>('All');
 const expandedTree = ref<string[]>([]);
 const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
-  {
-    icon: 'mdi-office-building-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
   {
     icon: 'mdi-phone',
     color: 'hsl(var(--info-bg))',
@@ -90,15 +91,16 @@ const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
     color: 'hsl(var(--info-bg))',
     bgColor: 'var(--surface-1)',
   },
+]);
+
+const formBankBook = ref<BankBook[]>([
   {
-    icon: 'mdi-qrcode',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-  {
-    icon: 'mdi-piggy-bank-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
+    bankName: '',
+    accountNumber: '',
+    bankBranch: '',
+    accountName: '',
+    accountType: '',
+    currentlyUse: true,
   },
 ]);
 
@@ -294,6 +296,12 @@ async function fetchBranchById(id: string) {
     imageUrl.value = res.imageUrl;
     prevImageUrl.value = res.imageUrl;
 
+    const updatedBank = res.bank.map((item) => {
+      const { id: _id, branchId: _branchId, ...rest } = item;
+      return rest;
+    });
+    formBankBook.value = updatedBank;
+
     formData.value = {
       headOfficeId: res.headOfficeId,
       taxNo: res.taxNo,
@@ -326,6 +334,17 @@ function clearData() {
     code: '',
   };
   profileFile.value = undefined;
+
+  formBankBook.value = [
+    {
+      bankName: '',
+      accountNumber: '',
+      bankBranch: '',
+      accountName: '',
+      accountType: '',
+      currentlyUse: true,
+    }
+  ];
 }
 
 async function undo() {
@@ -473,6 +492,7 @@ async function onSubmit() {
       },
       profileFile.value,
       profileFileImg.value,
+      formBankBook.value,
     );
 
     await branchStore.fetchList({ pageSize: 99999 });
@@ -490,11 +510,14 @@ async function onSubmit() {
       delete formData.value['codeHeadOffice'];
     }
 
-    await branchStore.create({
-      ...formData.value,
-      qrCodeImage: profileFile.value,
-      imageUrl: profileFileImg.value,
-    });
+    await branchStore.create(
+      {
+        ...formData.value,
+        qrCodeImage: profileFile.value,
+        imageUrl: profileFileImg.value,
+      },
+      formBankBook.value,
+    );
 
     await branchStore.fetchList({ pageSize: 99999 });
     modal.value = false;
@@ -1484,7 +1507,7 @@ watch(currentHq, () => {
               },
               {
                 name: $t('bankBook'),
-                anchor: 'form-bankBook',
+                anchor: 'form-bank',
               },
             ]"
             background="transparent"
@@ -1559,6 +1582,12 @@ watch(currentHq, () => {
             }
           "
         />
+        <FormBank
+          id="form-bank"
+          title="bankBook"
+          dense
+          v-model:bank-book-list="formBankBook"
+        />
         <!-- <FormImage
           :readonly="formType === 'view'"
           v-model:image="imageUrl"
@@ -1639,7 +1668,7 @@ watch(currentHq, () => {
                 },
                 {
                   name: $t('bankBook'),
-                  anchor: 'info-bankBook',
+                  anchor: 'info-bank',
                 },
               ]"
               background="transparent"
@@ -1717,6 +1746,13 @@ watch(currentHq, () => {
               }
             "
           />
+          <FormBank
+            id="info-bank"
+            :readonly="formType === 'view'"
+            title="bankBook"
+            dense
+            v-model:bank-book-list="formBankBook"
+          />
           <!-- <FormImage
             @upload="
               () => {