fix算力订单发票预览，删除无用的弹窗

src/views/apihub/apiorder/OrderViewInvoiceForm.vue

-<template>
-  <!-- 图片查看弹窗 -->
-  <el-dialog
-    v-model="dialogVisible"
-    title="查看发票图片"
-    :width="`600px`"
-    :close-on-click-modal="false">
-    <div class="flex justify-center p-4">
-      <img
-        :src="formData.invoiceUrl"
-        alt="发票图片"
-        class="max-w-full max-h-[500px] object-contain"
-        @error="handleImageError"
-      />
-    </div>
-  </el-dialog>
-</template>
-<script setup lang="ts">
-
-const dialogVisible = ref(false) // 弹窗是否展示
-
-const formData = ref({
-  id: undefined, // 订单编号
-  invoiceStatus: undefined,
-  invoiceUrl: ''
-})
-
-
-const open = async (row) => {
-  resetForm()
-  // 设置数据
-  formData.value.id = row.id
-  formData.value.invoiceStatus = row.invoiceStatus
-  formData.value.invoiceUrl = row.invoiceUrl
-  dialogVisible.value = true
-}
-
-defineExpose({open}) // 提供 open 方法，用于打开弹窗
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined, // 订单编号
-    invoiceStatus: undefined,
-    invoiceUrl: ''
-  }
-}
-
-const handleImageError = (e) => {
-  e.target.src = 'https://picsum.photos/600/400?grayscale&blur=2'; // 占位图
-  e.target.alt = '图片加载失败';
-};
-
-</script>
-
-
-<style scoped lang="scss">
-
-</style>

src/views/apihub/apiorder/index.vue

@@ -254,7 +254,6 @@ scope.row.invoiceStatus === InvoiceRequestEnum.INVOICING.type"
   <!-- 表单弹窗：添加/修改 -->
   <!-- 表单弹窗：添加/修改 -->
   <ApiOrderForm ref="formRef" @success="getList"/>
   <ApiOrderForm ref="formRef" @success="getList"/>
   <OrderIssueInvoiceForm ref="issueInvoiceFormRef" @success="getList"/>
   <OrderIssueInvoiceForm ref="issueInvoiceFormRef" @success="getList"/>
-  <OrderViewInvoiceForm ref="OrderViewInvoiceFormRef" @success="getList"/>
 
 
 </template>
 </template>
 
 
@@ -265,7 +264,6 @@ import download from '@/utils/download'
 import {ApiOrder, ApiOrderApi} from '@/api/apihub/apiorder'
 import {ApiOrder, ApiOrderApi} from '@/api/apihub/apiorder'
 import ApiOrderForm from './ApiOrderForm.vue'
 import ApiOrderForm from './ApiOrderForm.vue'
 import OrderIssueInvoiceForm from "@/views/apihub/apiorder/OrderIssueInvoiceForm.vue";
 import OrderIssueInvoiceForm from "@/views/apihub/apiorder/OrderIssueInvoiceForm.vue";
-import OrderViewInvoiceForm from "@/views/apihub/apiorder/OrderViewInvoiceForm.vue"
 import {InvoiceRequestEnum} from "@/utils/constants";
 import {InvoiceRequestEnum} from "@/utils/constants";
 
 
 /** api订单 列表 */
 /** api订单 列表 */
@@ -331,17 +329,11 @@ const issueInvoice = (row) => {
   issueInvoiceFormRef.value.open(row);
   issueInvoiceFormRef.value.open(row);
 }
 }
 
 
-// const OrderViewInvoiceFormRef = ref()
-// const viewInvoice = (row) => {
-//   // OrderViewInvoiceFormRef.value.open(row)
-//
-// }
-
 const pdfDialogVisible = ref(false)
 const pdfDialogVisible = ref(false)
 const invoiceUrl = ref('')
 const invoiceUrl = ref('')
 
 
 function viewInvoice(row) {
 function viewInvoice(row) {
-  invoiceUrl.value = import.meta.env.VITE_BASE_URL+'/admin-api/infra/file/preview?url=' + row.invoiceUrl // 从接口带回的 pdf 地址
+  invoiceUrl.value = import.meta.env.VITE_BASE_URL + '/admin-api/infra/file/preview?url=' + row.invoiceUrl // 从接口带回的 pdf 地址
   pdfDialogVisible.value = true
   pdfDialogVisible.value = true
 }
 }
 
 

src/views/mall/trade/order/form/OrderViewInvoiceForm.vue

-<template>
-  <!-- 图片查看弹窗 -->
-  <el-dialog
-    v-model="dialogVisible"
-    title="查看发票图片"
-    :width="`600px`"
-  :close-on-click-modal="false">
-  <div class="flex justify-center p-4">
-    <img
-      :src="formData.invoiceUrl"
-      alt="发票图片"
-      class="max-w-full max-h-[500px] object-contain"
-    @error="handleImageError"
-    />
-  </div>
-  </el-dialog>
-</template>
-<script setup lang="ts">
-
-import * as TradeOrderApi from "@/api/mall/trade/order";
-
-const dialogVisible = ref(false) // 弹窗是否展示
-
-const formData = ref({
-  id: undefined, // 订单编号
-  invoiceStatus: undefined,
-  invoiceUrl: ''
-})
-
-
-const open = async (row: TradeOrderApi.OrderVO) => {
-  resetForm()
-  // 设置数据
-  formData.value.id = row.id
-  formData.value.invoiceStatus = row.invoiceStatus
-  formData.value.invoiceUrl = row.invoiceUrl
-  dialogVisible.value = true
-}
-
-defineExpose({open}) // 提供 open 方法，用于打开弹窗
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined, // 订单编号
-    invoiceStatus: undefined,
-    invoiceUrl: ''
-  }
-}
-
-const handleImageError = (e) => {
-  e.target.src = 'https://picsum.photos/600/400?grayscale&blur=2'; // 占位图
-  e.target.alt = '图片加载失败';
-};
-
-</script>
-
-
-<style scoped lang="scss">
-
-</style>

src/views/mall/trade/order/index.vue

@@ -236,13 +236,25 @@
       :total="total"
       :total="total"
       @pagination="getList"
       @pagination="getList"
     />
     />
+    <!-- 发票预览弹窗 -->
+    <el-dialog
+      v-model="pdfDialogVisible"
+      title="发票预览"
+      width="80%"
+      top="5vh"
+    >
+      <iframe
+        v-if="invoiceUrl"
+        :src="invoiceUrl"
+        style="width: 100%; height: 80vh; border: none;"
+      ></iframe>
+    </el-dialog>
   </ContentWrap>
   </ContentWrap>
 
 
   <!-- 各种操作的弹窗 -->
   <!-- 各种操作的弹窗 -->
   <OrderDeliveryForm ref="deliveryFormRef" @success="getList" />
   <OrderDeliveryForm ref="deliveryFormRef" @success="getList" />
   <OrderUpdateRemarkForm ref="updateRemarkForm" @success="getList" />
   <OrderUpdateRemarkForm ref="updateRemarkForm" @success="getList" />
   <OrderIssueInvoiceForm ref="issueInvoiceFormRef" @success="getList" />
   <OrderIssueInvoiceForm ref="issueInvoiceFormRef" @success="getList" />
-  <OrderViewInvoiceForm ref="viewInvoiceFormRef" @success="getList" />
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
@@ -250,7 +262,6 @@ import type { FormInstance } from 'element-plus'
 import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
 import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
 import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
 import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
 import OrderIssueInvoiceForm  from "@/views/mall/trade/order/form/OrderIssueInvoiceForm.vue";
 import OrderIssueInvoiceForm  from "@/views/mall/trade/order/form/OrderIssueInvoiceForm.vue";
-import OrderViewInvoiceForm from "@/views/mall/trade/order/form/OrderViewInvoiceForm.vue";
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
@@ -349,7 +360,10 @@ const openDetail = (id: number) => {
 const deliveryFormRef = ref()
 const deliveryFormRef = ref()
 const updateRemarkForm = ref()
 const updateRemarkForm = ref()
 const issueInvoiceFormRef = ref()
 const issueInvoiceFormRef = ref()
-const viewInvoiceFormRef = ref()
+
+const pdfDialogVisible = ref(false)
+const invoiceUrl = ref('')
+
 const handleCommand = (command: string, row: TradeOrderApi.OrderVO) => {
 const handleCommand = (command: string, row: TradeOrderApi.OrderVO) => {
   switch (command) {
   switch (command) {
     case 'remark':
     case 'remark':
@@ -362,7 +376,8 @@ const handleCommand = (command: string, row: TradeOrderApi.OrderVO) => {
       issueInvoiceFormRef.value?.open(row)
       issueInvoiceFormRef.value?.open(row)
       break
       break
     case 'viewInvoice':
     case 'viewInvoice':
-      viewInvoiceFormRef.value?.open(row)
+      invoiceUrl.value = import.meta.env.VITE_BASE_URL+'/admin-api/infra/file/preview?url=' + row.invoiceUrl // 从接口带回的 pdf 地址
+      pdfDialogVisible.value = true
       break
       break
   }
   }
 }
 }