api发票

src/utils/constants.js

@@ -16,3 +16,21 @@ export const PayOrderStatusEnum = {
     }
     }
 }
 }
 
 
+/**
+ * 开票状态枚举
+ */
+export const InvoiceRequestEnum = {
+    UNINVOICED: {
+        type: 0,
+        name: '未开票'
+    },
+    INVOICING: {
+        type: 1,
+        name: '开票中'
+    },
+    INVOICED: {
+        type: 2,
+        name: '已开票'
+    }
+}
+

src/views/console/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-[500px] max-h-[400px] object-contain border rounded"
+          @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/console/apiOrder.vue

@@ -148,6 +148,15 @@
           >
           >
             详情
             详情
           </el-button>
           </el-button>
+          <el-button
+              v-if="scope.row.invoiceStatus === InvoiceRequestEnum.INVOICED.type"
+              link
+              type="success"
+              plain
+              @click="viewInvoice(scope.row)"
+          >
+            展示发票
+          </el-button>
         </template>
         </template>
       </el-table-column>
       </el-table-column>
     </el-table>
     </el-table>
@@ -209,6 +218,7 @@
     </el-dialog>
     </el-dialog>
 
 
   </div>
   </div>
+  <OrderViewInvoiceForm ref="OrderViewInvoiceFormRef" @success="getList"/>
 </template>
 </template>
 
 
 <script setup name="ApiOrder">
 <script setup name="ApiOrder">
@@ -216,6 +226,8 @@ import {
   getApiOrder
   getApiOrder
 } from '@/api/apiorder.js'
 } from '@/api/apiorder.js'
 import {parseTime} from "../../utils/ruoyi.js";
 import {parseTime} from "../../utils/ruoyi.js";
+import {InvoiceRequestEnum} from "@/utils/constants.js";
+import OrderViewInvoiceForm from "@/views/console/OrderViewInvoiceForm.vue";
 
 
 const {proxy} = getCurrentInstance()
 const {proxy} = getCurrentInstance()
 
 
@@ -275,6 +287,11 @@ function loadList() {
   })
   })
 }
 }
 
 
+const OrderViewInvoiceFormRef = ref()
+const viewInvoice = (row) => {
+  OrderViewInvoiceFormRef.value.open(row)
+}
+
 // 取消按钮
 // 取消按钮
 function cancel() {
 function cancel() {
   open.value = false
   open.value = false