refactor: add permitNo , permitIssueDate ,permitExpireDate

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { isRoleInclude } from 'src/stores/utils';
+import DatePicker from '../shared/DatePicker.vue';
 
 const code = defineModel<string>('code');
 const branchCount = defineModel<number>('branchCount', { default: 0 });
@@ -11,6 +12,10 @@ const nameEN = defineModel<string>('nameEN');
 const typeBranch = defineModel<string>('typeBranch');
 const virtual = defineModel<boolean>('virtual');
 
+const permitExpireDate = defineModel<Date>('permitExpireDate');
+const permitIssueDate = defineModel<Date>('permitIssueDate');
+const permitNo = defineModel<string>('permitNo');
+
 defineProps<{
   title?: string;
   dense?: boolean;
@@ -87,24 +92,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           @update:model-value="(v) => (code = v as string)"
         />
 
-        <!--  view ? `${formatCode(code, 'number')}${branchCount}` : code -->
-        <!-- <q-input
-
-          v-if="typeBranch !== 'headOffice'"
-          :dense="dense"
-          outlined
-          :disable="view && !readonly"
-          :readonly="readonly"
-          hide-bottom-space
-          class="col"
-          :label="$t('branch.form.codeBranch')"
-          for="input-code-sub-branch"
-          :model-value="
-            view ? formatCode(codeSubBranch, 'number') : codeSubBranch
-          "
-          @update:model-value="(v) => (codeSubBranch = v as string)"
-        /> -->
-
         <q-input
           :dense="dense"
           outlined
@@ -199,6 +186,39 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           </template>
         </q-select>
       </div>
+
+      <div class="col-12 row q-col-gutter-sm">
+        <q-input
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-4"
+          :label="$t('general.licenseNumber')"
+          v-model="permitNo"
+          :rules="[(val) => val && val.length > 0]"
+          :error-message="$t('form.error.required')"
+          for="input-name"
+        />
+
+        <DatePicker
+          class="col-3"
+          id="input-start-date"
+          :readonly="readonly"
+          :label="$t('general.dateOfIssue')"
+          v-model="permitIssueDate"
+          clearable
+        />
+
+        <DatePicker
+          class="col-3"
+          id="input-start-date"
+          :readonly="readonly"
+          :label="$t('general.expirationDate')"
+          v-model="permitExpireDate"
+          clearable
+        />
+      </div>
     </div>
   </div>
 </template>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { UploadFile } from 'components/upload-file';
 import { storeToRefs } from 'pinia';
 import { ref, onMounted, computed, watch } from 'vue';
 import { Icon } from '@iconify/vue';
@@ -113,7 +114,7 @@ const columns = [
     sortable: true,
   },
 ] satisfies QTableProps['columns'];
-
+const currentTab = ref<string>('main');
 const modal = ref<boolean>(false);
 const hideStat = ref(false);
 const currentId = ref<string>('');
@@ -340,6 +341,9 @@ const defaultFormData = {
   webUrl: '',
   virtual: false,
   selectedImage: '',
+  permitExpireDate: new Date(),
+  permitIssueDate: new Date(),
+  permitNo: '',
 };
 
 const formDialogRef = ref();
@@ -388,8 +392,6 @@ async function selectedSubBranche(id: string) {
 async function fetchBranchById(id: string) {
   const res = await branchStore.fetchById(id, { includeContact: true });
   if (res) {
-    console.log(res);
-
     qrCodeimageUrl.value = `${baseUrl}/branch/${res.id}/line-image?ts=${Date.now()}`;
     imageUrl.value = `${baseUrl}/branch/${res.id}/image/${res.selectedImage}`;
     formBankBook.value = res.bank;
@@ -424,6 +426,10 @@ async function fetchBranchById(id: string) {
       webUrl: res.webUrl,
       virtual: res.virtual,
       selectedImage: res.selectedImage,
+
+      permitExpireDate: new Date(res.permitExpireDate),
+      permitIssueDate: new Date(res.permitIssueDate),
+      permitNo: res.permitNo,
     };
   }
 }
@@ -1635,6 +1641,21 @@ watch(currentHq, () => {
                   : '--violet-11'
         }-hsl)/${imageUrl ? '0' : '0.15'})`"
         :menu="formMenuIcon"
+        v-model:current-tab="currentTab"
+        :tabs-list="[
+          {
+            name: 'main',
+            label: 'customerBranch.tab.main',
+          },
+          {
+            name: 'attachment',
+            label: 'customerBranch.tab.attachment',
+          },
+          {
+            name: 'remark',
+            label: 'customerBranch.tab.remark',
+          },
+        ]"
         @view="
           () => {
             imageDialog = true;
@@ -1698,38 +1719,104 @@ watch(currentHq, () => {
       </div>
 
       <div class="col-md-10 col-12 q-pa-md q-gutter-y-xl">
-        <FormBranchInformation
+        <template v-if="currentTab === 'main'">
-          id="form-information"
+          <FormBranchInformation
-          v-model:branchCount="formLastSubBranch"
+            id="form-information"
-          v-model:abbreviation="formData.code"
+            v-model:branchCount="formLastSubBranch"
-          v-model:code="formData.codeHeadOffice"
+            v-model:abbreviation="formData.code"
-          v-model:code-sub-branch="currentEdit.code"
+            v-model:code="formData.codeHeadOffice"
-          v-model:taxNo="formData.taxNo"
+            v-model:code-sub-branch="currentEdit.code"
-          v-model:name="formData.name"
+            v-model:taxNo="formData.taxNo"
-          v-model:nameEN="formData.nameEN"
+            v-model:name="formData.name"
-          v-model:type-branch="formTypeBranch"
+            v-model:nameEN="formData.nameEN"
-          :dense="true"
+            v-model:type-branch="formTypeBranch"
-          :outlined="true"
+            v-model:permit-no="formData.permitNo"
-          :readonly="formType === 'view'"
+            v-model:permit-issue-date="formData.permitIssueDate"
-          title="form.field.basicInformation"
+            v-model:permit-expire-date="formData.permitExpireDate"
-          :view="isSubCreate"
+            :dense="true"
-          onCreate
+            :outlined="true"
-        />
+            :readonly="formType === 'view'"
-        <FormBranchContact
+            title="form.field.basicInformation"
-          id="form-contact"
+            :view="isSubCreate"
-          v-model:type-branch="formTypeBranch"
+            onCreate
-          v-model:telephone-no="formData.telephoneNo"
+          />
-          v-model:contact="formData.contact"
+          <FormBranchContact
-          v-model:email="formData.email"
+            id="form-contact"
-          v-model:contact-name="formData.contactName"
+            v-model:type-branch="formTypeBranch"
-          v-model:line-id="formData.lineId"
+            v-model:telephone-no="formData.telephoneNo"
-          v-model:web-url="formData.webUrl"
+            v-model:contact="formData.contact"
-          :separator="true"
+            v-model:email="formData.email"
-          title="branch.form.group.contact"
+            v-model:contact-name="formData.contactName"
-          :dense="true"
+            v-model:line-id="formData.lineId"
-          :outlined="true"
+            v-model:web-url="formData.webUrl"
-        />
+            :separator="true"
+            title="branch.form.group.contact"
+            :dense="true"
+            :outlined="true"
+          />
 
+          <AddressForm
+            id="form-address"
+            dense
+            outlined
+            separator
+            prefix-id="default"
+            :title="'form.address'"
+            v-model:address="formData.address"
+            v-model:addressEN="formData.addressEN"
+            v-model:province-id="formData.provinceId"
+            v-model:district-id="formData.districtId"
+            v-model:sub-district-id="formData.subDistrictId"
+            v-model:zip-code="formData.zipCode"
+          />
+          <FormLocation
+            id="form-location"
+            :readonly="formType === 'view'"
+            :separator="true"
+            v-model:latitude="formData.latitude"
+            v-model:longitude="formData.longitude"
+            outlined
+            dense
+            title="branch.form.group.location"
+          />
+          <FormQr
+            id="form-qr"
+            title="QR Code"
+            :separator="true"
+            :qr="qrCodeimageUrl"
+            :readonly="formType === 'view'"
+            @view-qr="
+              () => {
+                triggerEditQrCodeLine();
+              }
+            "
+            @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
+          />
+          <FormBank
+            id="form-bank"
+            title="branch.form.group.bankAccount"
+            dense
+            v-model:bank-book-list="formBankBook"
+            @view-qr="
+              (i) => {
+                currentIndexQrCodeBank = i;
+                triggerEditQrCodeBank();
+              }
+            "
+            @edit-qr="
+              (i) => {
+                currentIndexQrCodeBank = i;
+                refQrCodeUpload && refQrCodeUpload.browse();
+              }
+            "
+          />
+          <FormBranchAdmin
+            id="form-branch-admin-view"
+            :admin="currentBranchAdmin"
+          />
+        </template>
+
+        <template v-if="currentTab === 'attachment'">
         <AddressForm
           id="form-address"
           dense
@@ -1799,6 +1886,9 @@ watch(currentHq, () => {
           "
           :title="$t('formDialogTitleImg')"
         /> -->
+        </template>
+
+        <template v-if="currentTab === 'remark'"></template>
       </div>
     </div>
   </DialogForm>
@@ -1982,6 +2072,9 @@ watch(currentHq, () => {
               v-model:name="formData.name"
               v-model:nameEN="formData.nameEN"
               v-model:type-branch="formTypeBranch"
+              v-model:permit-no="formData.permitNo"
+              v-model:permit-issue-date="formData.permitIssueDate"
+              v-model:permit-expire-date="formData.permitExpireDate"
               :separator="true"
               :dense="true"
               :outlined="true"