发票预览2.0

src/api/apihub/apiorder/index.ts

@@ -53,5 +53,10 @@ export const ApiOrderApi = {
   // 导出api订单 Excel
   exportApiOrder: async (params) => {
     return await request.download({ url: `/apihub/api-order/export-excel`, params })
+  },
+
+  issueInvoice: async (data) =>{
+    return await request.put({ url: `/apihub/api-order/issue-invoice`, data})
   }
+
 }

src/config/axios/service.ts

@@ -161,7 +161,7 @@ service.interceptors.response.use(
         })
       }
     } else if (code === 500) {
-      ElMessage.error(t('sys.api.errMsg500'))
+      ElMessage.error(msg)
       return Promise.reject(new Error(msg))
     } else if (code === 901) {
       ElMessage.error({

src/views/apihub/apiorder/OrderIssueInvoiceForm.vue

+<template>
+  <Dialog v-model="dialogVisible" title="上传发票" width="45%">
+    <el-form-item label="发票地址" prop="invoiceUrl">
+      <UploadImg v-model="formData.invoiceUrl" />
+      <p class="upload-tips">
+        请上传 大小不超过 <span class="red-text">5MB</span> 格式为
+        <span class="red-text">png/jpg/jpeg</span>
+        的文件
+      </p>
+    </el-form-item>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+  import {ApiOrderApi} from "@/api/apihub/apiorder";
+  const { t } = useI18n() // 国际化
+  const message = useMessage() // 消息弹窗
+
+  const dialogVisible = ref(false) // 弹窗是否展示
+  const formRef = ref() // 表单 Ref
+
+  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+
+  /** 提交表单 */
+  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+  const submitForm = async () => {
+    // 提交请求
+    formLoading.value = true
+    try {
+      const data = unref(formData)
+      await ApiOrderApi.issueInvoice(data)
+      message.success(t('common.updateSuccess'))
+      dialogVisible.value = false
+      // 发送操作成功的事件
+      emit('success', true)
+    } catch (error) {
+      console.error(error);
+    }finally {
+      formLoading.value = 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: ''
+    }
+    formRef.value?.resetFields()
+  }
+</script>
+
+
+<style scoped lang="scss">
+
+</style>

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/mall/trade/order/index.vue

@@ -250,6 +250,7 @@ import type { FormInstance } from 'element-plus'
 import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
 import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.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 PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
@@ -358,14 +359,6 @@ const handleCommand = (command: string, row: TradeOrderApi.OrderVO) => {
       deliveryFormRef.value?.open(row)
       break
     case 'issueInvoice':
-      // 调试：查看 ref 是否拿到组件实例
-      console.log('issueInvoiceFormRef.value:', issueInvoiceFormRef.value);
-      if (!issueInvoiceFormRef.value) {
-        alert('组件未加载成功，请检查导入路径！');
-        return;
-      }
-      // 调试：查看实例上是否有 open 方法
-      console.log('是否有 open 方法:', typeof issueInvoiceFormRef.value.open === 'function');
       issueInvoiceFormRef.value?.open(row)
       break
     case 'viewInvoice':