<script lang="ts" setup>
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
import type { FinanceReimbursementApi } from '#/api/finance/reimbursement';
|
import type { DescriptionItemSchema } from '#/components/description';
|
|
import { h, nextTick, onMounted, ref } from 'vue';
|
|
import { ContentWrap } from '@vben/common-ui';
|
import { DICT_TYPE } from '@vben/constants';
|
import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
|
|
import { Spin } from 'ant-design-vue';
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
import { getReimbursement } from '#/api/finance/reimbursement';
|
import { DictTag } from '#/components/dict-tag';
|
import { useDescription } from '#/components/description';
|
|
defineOptions({ name: 'FinanceReimbursementApproveDetail' });
|
|
const props = defineProps<{ id: string }>();
|
|
const loading = ref(false);
|
const formData = ref<FinanceReimbursementApi.Reimbursement>();
|
|
/** 文本字段空值占位 */
|
function textRender(val: unknown) {
|
return val === 0 || val ? String(val) : '-';
|
}
|
|
/** 报销明细（审批详情只读列） */
|
function useReimbursementItemColumns(): VxeTableGridOptions['columns'] {
|
return [
|
{ type: 'seq', title: '序号', width: 55 },
|
{
|
field: 'expenseType',
|
title: '费用类型',
|
minWidth: 110,
|
cellRender: {
|
name: 'CellDict',
|
props: { type: DICT_TYPE.FINANCE_EXPENSE_TYPE },
|
},
|
},
|
{
|
field: 'invoiceNo',
|
title: '发票号码',
|
minWidth: 160,
|
formatter: ({ cellValue }) => textRender(cellValue),
|
},
|
{
|
field: 'invoiceAmount',
|
title: '发票金额',
|
minWidth: 120,
|
formatter: ({ cellValue }) => erpPriceInputFormatter(cellValue) || '-',
|
},
|
{
|
field: 'invoiceDate',
|
title: '发票日期',
|
minWidth: 120,
|
formatter: ({ cellValue }) => textRender(cellValue),
|
},
|
{
|
field: 'drawer',
|
title: '开票方',
|
minWidth: 160,
|
formatter: ({ cellValue }) => textRender(cellValue),
|
},
|
{
|
field: 'description',
|
title: '费用说明',
|
minWidth: 160,
|
formatter: ({ cellValue }) => textRender(cellValue),
|
},
|
];
|
}
|
|
const [Grid, gridApi] = useVbenVxeGrid({
|
gridOptions: {
|
columns: useReimbursementItemColumns(),
|
data: [],
|
minHeight: 200,
|
autoResize: true,
|
border: true,
|
rowConfig: {
|
keyField: 'id',
|
isHover: true,
|
},
|
pagerConfig: {
|
enabled: false,
|
},
|
toolbarConfig: {
|
enabled: false,
|
},
|
},
|
});
|
|
const [Descriptions] = useDescription({
|
bordered: true,
|
column: 2,
|
schema: [
|
{ label: '报销单号', field: 'no', render: textRender },
|
{ label: '报销标题', field: 'title', render: textRender },
|
{
|
label: '报销总金额（元）',
|
field: 'totalAmount',
|
render: (val) => erpPriceInputFormatter(val) || '-',
|
},
|
{
|
label: '状态',
|
field: 'status',
|
render: (val) =>
|
h(DictTag, {
|
type: DICT_TYPE.FINANCE_REIMBURSEMENT_STATUS,
|
value: val,
|
}),
|
},
|
{ label: '申请人', field: 'applicantName', render: textRender },
|
{
|
label: '申请日期',
|
field: 'applyDate',
|
render: (val) => textRender(val),
|
},
|
{
|
label: '归档时间',
|
field: 'archiveTime',
|
render: (val) => (val ? (formatDateTime(val) as string) : '-'),
|
},
|
{ label: '创建人', field: 'creatorName', render: textRender },
|
{
|
label: '创建时间',
|
field: 'createTime',
|
render: (val) => formatDateTime(val) as string,
|
},
|
{ label: '备注', field: 'remark', render: textRender },
|
] as DescriptionItemSchema[],
|
});
|
|
onMounted(async () => {
|
try {
|
loading.value = true;
|
formData.value = await getReimbursement(Number(props.id));
|
if (formData.value?.items?.length) {
|
await nextTick();
|
await gridApi.grid.reloadData(formData.value.items);
|
}
|
} finally {
|
loading.value = false;
|
}
|
});
|
</script>
|
|
<template>
|
<ContentWrap class="m-2">
|
<Spin :spinning="loading" tip="加载中...">
|
<div class="space-y-4">
|
<!-- 报销单基本信息 -->
|
<div class="rounded-lg border border-border bg-background p-4">
|
<div class="mb-4 flex items-center gap-2">
|
<span class="inline-block h-4 w-1 rounded bg-primary" />
|
<span class="text-base font-semibold">报销单基本信息</span>
|
</div>
|
<Descriptions :data="formData" />
|
</div>
|
<!-- 报销明细 -->
|
<div
|
v-if="formData?.items?.length"
|
class="rounded-lg border border-border bg-background p-4"
|
>
|
<div class="mb-4 flex items-center gap-2">
|
<span class="inline-block h-4 w-1 rounded bg-primary" />
|
<span class="text-base font-semibold">报销明细</span>
|
</div>
|
<Grid />
|
</div>
|
<!-- 发票附件 -->
|
<div
|
v-if="formData?.attachmentList?.length"
|
class="rounded-lg border border-border bg-background p-4"
|
>
|
<div class="mb-4 flex items-center gap-2">
|
<span class="inline-block h-4 w-1 rounded bg-primary" />
|
<span class="text-base font-semibold">发票附件</span>
|
</div>
|
<div class="flex flex-wrap gap-3">
|
<a
|
v-for="file in formData.attachmentList"
|
:key="file.id"
|
:href="file.previewURL || file.url"
|
target="_blank"
|
class="text-blue-500 hover:underline"
|
>
|
{{ file.name || `发票-${file.id}` }}
|
</a>
|
</div>
|
</div>
|
</div>
|
</Spin>
|
</ContentWrap>
|
</template>
|
