77 lines
3.2 KiB
Vue
77 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { Drawer, Tabs } from 'ant-design-vue';
|
|
import type { EnergyAccountApi } from '#/api/energy/account';
|
|
import { getProjectAccountList, getFlowPage } from '#/api/energy/account';
|
|
import { FLOW_TYPE_OPTIONS } from '../data';
|
|
|
|
const visible = ref(false);
|
|
const account = ref<EnergyAccountApi.Account>();
|
|
const projectAccounts = ref<EnergyAccountApi.ProjectAccount[]>([]);
|
|
const flows = ref<EnergyAccountApi.Flow[]>([]);
|
|
const activeTab = ref('project');
|
|
|
|
function open(data: EnergyAccountApi.Account) {
|
|
account.value = data;
|
|
visible.value = true;
|
|
loadProjectAccounts();
|
|
loadFlows();
|
|
}
|
|
|
|
async function loadProjectAccounts() {
|
|
if (!account.value?.id) return;
|
|
projectAccounts.value = await getProjectAccountList(account.value.id);
|
|
}
|
|
|
|
async function loadFlows() {
|
|
if (!account.value?.id) return;
|
|
const result = await getFlowPage({ pageNo: 1, pageSize: 50, accountId: account.value.id } as any);
|
|
flows.value = result?.list || [];
|
|
}
|
|
|
|
// Project account columns for a-table
|
|
const projectColumns = [
|
|
{ title: '项目名称', dataIndex: 'projectName', width: 150 },
|
|
{ title: '合同编号', dataIndex: 'contractCode', width: 120 },
|
|
{ title: '项目余额', dataIndex: 'balance', width: 100, align: 'right' as const },
|
|
{ title: '已划账', dataIndex: 'accumulatedRecharge', width: 100, align: 'right' as const },
|
|
{ title: '已消费', dataIndex: 'accumulatedConsume', width: 100, align: 'right' as const },
|
|
];
|
|
|
|
// Flow columns for a-table
|
|
const flowColumns = [
|
|
{ title: '时间', dataIndex: 'createTime', width: 180 },
|
|
{ title: '流水类型', dataIndex: 'flowType', width: 80, customRender: ({ text }: any) => FLOW_TYPE_OPTIONS.find(o => o.value === text)?.label || text },
|
|
{ title: '变动金额', dataIndex: 'amount', width: 100, align: 'right' as const },
|
|
{ title: '变动前余额', dataIndex: 'balanceBefore', width: 100, align: 'right' as const },
|
|
{ title: '变动后余额', dataIndex: 'balanceAfter', width: 100, align: 'right' as const },
|
|
{ title: '关联单据号', dataIndex: 'bizCode', width: 120 },
|
|
{ title: '备注', dataIndex: 'remark', width: 150 },
|
|
];
|
|
|
|
defineExpose({ open });
|
|
</script>
|
|
|
|
<template>
|
|
<Drawer v-model:open="visible" :title="account?.customerName + ' - 账户详情'" width="720">
|
|
<!-- Balance card -->
|
|
<div class="mb-4 rounded-lg p-6 text-white" style="background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%)">
|
|
<div class="text-sm opacity-80">当前余额</div>
|
|
<div class="text-3xl font-bold">¥{{ account?.balance?.toFixed(2) }}</div>
|
|
<div class="mt-2 flex gap-4 text-sm opacity-80">
|
|
<span>累计充值 ¥{{ account?.accumulatedRecharge?.toFixed(2) }}</span>
|
|
<span>累计消费 ¥{{ account?.accumulatedConsume?.toFixed(2) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs v-model:activeKey="activeTab">
|
|
<Tabs.TabPane key="project" tab="项目账户">
|
|
<a-table :data-source="projectAccounts" :columns="projectColumns" :pagination="false" size="small" row-key="id" />
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane key="flow" tab="账户流水">
|
|
<a-table :data-source="flows" :columns="flowColumns" :pagination="false" size="small" row-key="id" :scroll="{ y: 400 }" />
|
|
</Tabs.TabPane>
|
|
</Tabs>
|
|
</Drawer>
|
|
</template>
|