88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 文件职责：成本分析明细表。
|
|
*/
|
|
import type { TableProps } from 'ant-design-vue';
|
|
|
|
import type { FinanceCostMonthlyDetailRowDto } from '#/api/finance/cost';
|
|
|
|
import { h } from 'vue';
|
|
|
|
import { Table } from 'ant-design-vue';
|
|
|
|
import {
|
|
formatCurrency,
|
|
formatPercent,
|
|
} from '../composables/cost-page/helpers';
|
|
|
|
interface Props {
|
|
loading: boolean;
|
|
rows: FinanceCostMonthlyDetailRowDto[];
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const columns: TableProps['columns'] = [
|
|
{
|
|
title: '月份',
|
|
dataIndex: 'month',
|
|
width: 110,
|
|
},
|
|
{
|
|
title: '食材',
|
|
dataIndex: 'foodAmount',
|
|
align: 'right',
|
|
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
|
},
|
|
{
|
|
title: '人工',
|
|
dataIndex: 'laborAmount',
|
|
align: 'right',
|
|
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
|
},
|
|
{
|
|
title: '固定',
|
|
dataIndex: 'fixedAmount',
|
|
align: 'right',
|
|
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
|
},
|
|
{
|
|
title: '包装',
|
|
dataIndex: 'packagingAmount',
|
|
align: 'right',
|
|
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
|
},
|
|
{
|
|
title: '总计',
|
|
dataIndex: 'totalCost',
|
|
align: 'right',
|
|
customRender: ({ text }) =>
|
|
h(
|
|
'span',
|
|
{ class: 'fc-total-amount' },
|
|
formatCurrency(Number(text ?? 0)),
|
|
),
|
|
},
|
|
{
|
|
title: '成本率',
|
|
dataIndex: 'costRate',
|
|
align: 'right',
|
|
customRender: ({ text }) => formatPercent(Number(text ?? 0)),
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fc-table-card">
|
|
<div class="fc-section-title">成本明细</div>
|
|
<Table
|
|
row-key="month"
|
|
size="middle"
|
|
:columns="columns"
|
|
:data-source="props.rows"
|
|
:loading="props.loading"
|
|
:pagination="false"
|
|
/>
|
|
</div>
|
|
</template>
|