refactor: view image dialog

src/pages/05_quotation/QuotationForm.vue

@@ -29,6 +29,7 @@ import { View } from './types.ts';
 import {
   EmployeeWorker,
   PayCondition,
+  ProductRelation,
   ProductServiceList,
   QuotationPayload,
 } from 'src/stores/quotations/types';
@@ -64,6 +65,7 @@ import QuotationFormInfo from './QuotationFormInfo.vue';
 import QuotationFormWorkerSelect from './QuotationFormWorkerSelect.vue';
 import QuotationFormWorkerAddDialog from './QuotationFormWorkerAddDialog.vue';
 import UploadFileSection from 'src/components/upload-file/UploadFileSection.vue';
+import DialogViewFile from 'src/components/dialog/DialogViewFile.vue';
 
 import { columnPaySplit } from './constants';
 import { precisionRound } from 'src/utils/arithmetic';
@@ -291,6 +293,9 @@ const pageState = reactive({
   employeeModal: false,
   productServiceModal: false,
   remarkWrite: true,
+  imageDialog: false,
+  imageDialogTitle: '',
+  imageDialogUrl: '',
 });
 
 const productList = ref<Partial<Record<ProductGroupId, Product[]>>>({});
@@ -956,6 +961,14 @@ async function uploadAttachment(file?: File) {
   if (ret) await getAttachment();
 }
 
+function viewProductFile(data: ProductRelation) {
+  const base64 = data.detail.match(/src="([^"]+)"/);
+
+  pageState.imageDialog = true;
+  pageState.imageDialogTitle = data.name;
+  pageState.imageDialogUrl = base64 ? base64[1] : '';
+}
+
 const sessionData = ref<Record<string, any>>();
 
 onMounted(async () => {
@@ -1539,6 +1552,7 @@ watch(
                     }
                   "
                   @update-table="handleUpdateProductTable"
+                  @view-file="viewProductFile"
                 />
               </div>
             </q-expansion-item>
@@ -2262,6 +2276,12 @@ watch(
       fetchQuotation();
     "
   />
+
+  <DialogViewFile
+    :title="pageState.imageDialogTitle"
+    :url="pageState.imageDialogUrl"
+    v-model="pageState.imageDialog"
+  />
 </template>
 
 <style scoped>