feat: เพิ่ม อัปโหลดรูป ภาพสำนักงานได้

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

@@ -16,6 +16,7 @@ import FormBranchInformation from 'src/components/01_branch-management/FormBranc
 import FormLocation from 'src/components/01_branch-management/FormLocation.vue';
 import FormQr from 'src/components/01_branch-management/FormQr.vue';
 import FormBranchContact from 'src/components/01_branch-management/FormBranchContact.vue';
+import FormImage from 'src/components/01_branch-management/FormImage.vue';
 
 import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
 import { watch } from 'vue';
@@ -25,6 +26,29 @@ const { t } = useI18n();
 
 const modal = ref<boolean>(false);
 
+const profileFileImg = ref<File | undefined>(undefined);
+const imageUrl = ref<string | null>('');
+
+const inputFileImg = (() => {
+  const element = document.createElement('input');
+  element.type = 'file';
+  element.accept = 'image/*';
+
+  const reader = new FileReader();
+  reader.addEventListener('load', () => {
+    if (typeof reader.result === 'string') imageUrl.value = reader.result;
+  });
+
+  element.addEventListener('change', () => {
+    profileFileImg.value = element.files?.[0];
+    if (profileFileImg.value) {
+      reader.readAsDataURL(profileFileImg.value);
+    }
+  });
+
+  return element;
+})();
+
 const profileFile = ref<File | undefined>(undefined);
 const qrCodeimageUrl = ref<string | null>('');
 
@@ -132,7 +156,7 @@ const formDialogRef = ref();
 const formType = ref<'create' | 'edit' | 'delete' | 'view'>('create');
 const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
 const codeHq = ref<{ id: string; code: string }>({ id: '', code: '' });
-const formData = ref<Omit<BranchCreate, 'qrCodeImage'>>(
+const formData = ref<Omit<BranchCreate, 'qrCodeImage' | 'imageUrl'>>(
   structuredClone(defaultFormData),
 );
 
@@ -144,7 +168,10 @@ async function fetchBranchById(id: string) {
   const res = await branchStore.fetchById(id);
 
   if (res) {
+    console.log(res);
+
     qrCodeimageUrl.value = res.qrCodeImageUrl;
+    imageUrl.value = res.imageUrl;
     formData.value = {
       headOfficeId: res.headOfficeId,
       taxNo: res.taxNo,
@@ -169,6 +196,8 @@ async function fetchBranchById(id: string) {
 
 function clearData() {
   formData.value = structuredClone(defaultFormData);
+  imageUrl.value = null;
+  qrCodeimageUrl.value = null;
   profileFile.value = undefined;
 }
 
@@ -244,25 +273,27 @@ function triggerDelete(id: string) {
 
 async function onSubmit() {
   if (formType.value === 'edit') {
-    if (!profileFile) {
-      await branchStore.editById(codeHq.value.id, formData.value);
-    } else {
-      await branchStore.editById(
-        codeHq.value.id,
-        formData.value,
-        profileFile.value,
-      );
-    }
+    await branchStore.editById(
+      codeHq.value.id,
+      formData.value,
+      profileFile.value,
+      profileFileImg.value,
+    );
 
     await branchStore.fetchList({ pageSize: 99999 });
     modal.value = false;
   }
 
   if (formTypeBranch.value === 'headOffice') {
-    if (formType.value === 'create' && profileFile.value) {
+    if (
+      formType.value === 'create' &&
+      profileFile.value &&
+      profileFileImg.value
+    ) {
       await branchStore.create({
         ...formData.value,
         qrCodeImage: profileFile.value,
+        imageUrl: profileFileImg.value,
       });
       await branchStore.fetchList({ pageSize: 99999 });
       modal.value = false;
@@ -270,12 +301,17 @@ async function onSubmit() {
   }
 
   if (formTypeBranch.value === 'subBranch') {
-    if (formType.value === 'create' && profileFile.value) {
+    if (
+      formType.value === 'create' &&
+      profileFile.value &&
+      profileFileImg.value
+    ) {
       formData.value.headOfficeId = codeHq.value.id;
 
       await branchStore.create({
         ...formData.value,
         qrCodeImage: profileFile.value,
+        imageUrl: profileFileImg.value,
       });
       await branchStore.fetchList({ pageSize: 99999 });
       modal.value = false;
@@ -766,11 +802,24 @@ watch(locale, () => {
 
     <template #location>
       <FormLocation
+        :separator="true"
         v-model:latitude="formData.latitude"
         v-model:longitude="formData.longitude"
         title="formDialogTitleLocation"
       />
     </template>
+
+    <template #by-type>
+      <FormImage
+        v-model:image="imageUrl"
+        @upload="
+          () => {
+            inputFileImg.click();
+          }
+        "
+        :title="$t('formDialogTitleImg')"
+      />
+    </template>
   </FormDialog>
 </template>