Skip to content

phsl / admin

Go to a project
Commit 6a4343b1 by Jony.L
Options

发票预览2.0

parent 6bccba02
Showing with 298 additions and 114 deletions
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 0 → 100644
<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 0 → 100644
<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
......@@ -26,15 +26,15 @@
class="!w-240px"
/>
</el-form-item>
<!-- <el-form-item label="套餐名称" prop="packageId">-->
<!-- <el-input-->
<!-- v-model="queryParams.packageId"-->
<!-- placeholder="请输入套餐名称"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="套餐名称" prop="packageId">-->
<!-- <el-input-->
<!-- v-model="queryParams.packageId"-->
<!-- placeholder="请输入套餐名称"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="订单编号" prop="orderNo">
<el-input
v-model="queryParams.orderNo"
......@@ -51,59 +51,66 @@
clearable
class="!w-240px"
>
<el-option label="请选择字典生成" value="" />
<el-option label="请选择字典生成" value=""/>
</el-select>
</el-form-item>
<!-- <el-form-item label="支付订单编号" prop="payOrderId">-->
<!-- <el-input-->
<!-- v-model="queryParams.payOrderId"-->
<!-- placeholder="请输入支付订单编号"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="订单支付时间" prop="payTime">-->
<!-- <el-date-picker-->
<!-- v-model="queryParams.payTime"-->
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
<!-- type="daterange"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
<!-- class="!w-220px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="支付成功的支付渠道" prop="payChannelCode">-->
<!-- <el-input-->
<!-- v-model="queryParams.payChannelCode"-->
<!-- placeholder="请输入支付成功的支付渠道"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="创建时间" prop="createTime">-->
<!-- <el-date-picker-->
<!-- v-model="queryParams.createTime"-->
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
<!-- type="daterange"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
<!-- class="!w-220px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="支付订单编号" prop="payOrderId">-->
<!-- <el-input-->
<!-- v-model="queryParams.payOrderId"-->
<!-- placeholder="请输入支付订单编号"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="订单支付时间" prop="payTime">-->
<!-- <el-date-picker-->
<!-- v-model="queryParams.payTime"-->
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
<!-- type="daterange"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
<!-- class="!w-220px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="支付成功的支付渠道" prop="payChannelCode">-->
<!-- <el-input-->
<!-- v-model="queryParams.payChannelCode"-->
<!-- placeholder="请输入支付成功的支付渠道"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="创建时间" prop="createTime">-->
<!-- <el-date-picker-->
<!-- v-model="queryParams.createTime"-->
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
<!-- type="daterange"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
<!-- class="!w-220px"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px"/>
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px"/>
重置
</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['apihub:api-order:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
<Icon icon="ep:plus" class="mr-5px"/>
新增
</el-button>
<el-button
type="success"
......@@ -112,16 +119,18 @@
:loading="exportLoading"
v-hasPermi="['apihub:api-order:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
<Icon icon="ep:download" class="mr-5px"/>
导出
</el-button>
<el-button
type="danger"
plain
:disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch"
v-hasPermi="['apihub:api-order:delete']"
type="danger"
plain
:disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch"
v-hasPermi="['apihub:api-order:delete']"
>
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
<Icon icon="ep:delete" class="mr-5px"/>
批量删除
</el-button>
</el-form-item>
</el-form>
......@@ -130,26 +139,26 @@
<!-- 列表 -->
<ContentWrap>
<el-table
row-key="id"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
@selection-change="handleRowCheckboxChange"
row-key="id"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
@selection-change="handleRowCheckboxChange"
>
<el-table-column type="selection" width="55" />
<!-- <el-table-column label="订单ID" align="center" prop="id" />-->
<el-table-column label="用户手机号" align="center" prop="userMobile" width="120px" />
<el-table-column label="API应用" align="center" prop="apiName" width="100px" />
<el-table-column label="套餐名称" align="center" prop="packageName" width="100px" />
<el-table-column label="订单编号" align="center" prop="orderNo" width="100px" />
<el-table-column type="selection" width="55"/>
<!-- <el-table-column label="订单ID" align="center" prop="id" />-->
<el-table-column label="用户手机号" align="center" prop="userMobile" width="120px"/>
<el-table-column label="API应用" align="center" prop="apiName" width="100px"/>
<el-table-column label="套餐名称" align="center" prop="packageName" width="100px"/>
<el-table-column label="订单编号" align="center" prop="orderNo" width="100px"/>
<el-table-column label="订单金额" align="center" prop="costPrice">
<template #default="scope">
{{ (scope.row.costPrice / 100).toFixed(2) }}元
</template>
</el-table-column>
<el-table-column label="订单状态" align="center" prop="statusName" />
<!-- <el-table-column label="支付订单编号" align="center" prop="payOrderId" />-->
<el-table-column label="订单状态" align="center" prop="statusName"/>
<!-- <el-table-column label="支付订单编号" align="center" prop="payOrderId" />-->
<el-table-column
label="订单支付时间"
align="center"
......@@ -157,29 +166,29 @@
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="支付状态" align="center" prop="payStatusName" />
<!-- <el-table-column-->
<!-- label="订单完成时间"-->
<!-- align="center"-->
<!-- prop="finishTime"-->
<!-- :formatter="dateFormatter"-->
<!-- width="180px"-->
<!-- />-->
<!-- <el-table-column-->
<!-- label="订单取消时间"-->
<!-- align="center"-->
<!-- prop="cancelTime"-->
<!-- :formatter="dateFormatter"-->
<!-- width="180px"-->
<!-- />-->
<!-- <el-table-column label="备注" align="center" prop="remark" />-->
<!-- <el-table-column-->
<!-- label="创建时间"-->
<!-- align="center"-->
<!-- prop="createTime"-->
<!-- :formatter="dateFormatter"-->
<!-- width="180px"-->
<!-- />-->
<el-table-column label="支付状态" align="center" prop="payStatusName"/>
<!-- <el-table-column-->
<!-- label="订单完成时间"-->
<!-- align="center"-->
<!-- prop="finishTime"-->
<!-- :formatter="dateFormatter"-->
<!-- width="180px"-->
<!-- />-->
<!-- <el-table-column-->
<!-- label="订单取消时间"-->
<!-- align="center"-->
<!-- prop="cancelTime"-->
<!-- :formatter="dateFormatter"-->
<!-- width="180px"-->
<!-- />-->
<!-- <el-table-column label="备注" align="center" prop="remark" />-->
<!-- <el-table-column-->
<!-- label="创建时间"-->
<!-- align="center"-->
<!-- prop="createTime"-->
<!-- :formatter="dateFormatter"-->
<!-- width="180px"-->
<!-- />-->
<el-table-column label="操作" align="center" min-width="120px">
<template #default="scope">
<el-button
......@@ -198,6 +207,25 @@
>
删除
</el-button>
<el-button
v-if="scope.row.invoiceStatus === InvoiceRequestEnum.UNINVOICED.type ||
scope.row.invoiceStatus === InvoiceRequestEnum.INVOICING.type"
link
type="warning"
plain
@click="issueInvoice(scope.row)"
>
开票
</el-button>
<el-button
v-if="scope.row.invoiceStatus === InvoiceRequestEnum.INVOICED.type"
link
type="success"
plain
@click="viewInvoice(scope.row)"
>
展示发票
</el-button>
</template>
</el-table-column>
</el-table>
......@@ -211,21 +239,27 @@
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ApiOrderForm ref="formRef" @success="getList" />
<ApiOrderForm ref="formRef" @success="getList"/>
<OrderIssueInvoiceForm ref="issueInvoiceFormRef" @success="getList"/>
<OrderViewInvoiceForm ref="OrderViewInvoiceFormRef" @success="getList"/>
</template>
<script setup lang="ts">
import { isEmpty } from '@/utils/is'
import { dateFormatter } from '@/utils/formatTime'
import {isEmpty} from '@/utils/is'
import {dateFormatter} from '@/utils/formatTime'
import download from '@/utils/download'
import { ApiOrderApi, ApiOrder } from '@/api/apihub/apiorder'
import {ApiOrder, ApiOrderApi} from '@/api/apihub/apiorder'
import ApiOrderForm from './ApiOrderForm.vue'
import OrderIssueInvoiceForm from "@/views/apihub/apiorder/OrderIssueInvoiceForm.vue";
import OrderViewInvoiceForm from "@/views/apihub/apiorder/OrderViewInvoiceForm.vue"
import {InvoiceRequestEnum} from "@/utils/constants";
/** api订单 列表 */
defineOptions({ name: 'ApiOrder' })
defineOptions({name: 'ApiOrder'})
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const {t} = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<ApiOrder[]>([]) // 列表的数据
......@@ -276,6 +310,18 @@ const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/**
* 开票
*/
const issueInvoiceFormRef = ref()
const issueInvoice = (row) => {
issueInvoiceFormRef.value.open(row);
}
const OrderViewInvoiceFormRef = ref()
const viewInvoice = (row) => {
OrderViewInvoiceFormRef.value.open(row)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
......@@ -286,7 +332,8 @@ const handleDelete = async (id: number) => {
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
} catch {
}
}
/** 批量删除api订单 */
......@@ -297,7 +344,8 @@ const handleDeleteBatch = async () => {
await ApiOrderApi.deleteApiOrderList(checkedIds.value);
message.success(t('common.delSuccess'))
await getList();
} catch {}
} catch {
}
}
const checkedIds = ref<number[]>([])
......
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':
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment