<template>
|
<div class="app-container">
|
<el-row :gutter="16" class="mb-16">
|
<el-col :span="12">
|
<el-card shadow="hover">
|
<div class="section-title">统一会计科目体系</div>
|
<el-tree
|
:data="accountTree"
|
node-key="code"
|
:props="{ label: 'label', children: 'children' }"
|
highlight-current
|
default-expand-all
|
/>
|
</el-card>
|
</el-col>
|
<el-col :span="12">
|
<el-card shadow="hover">
|
<div class="section-title">凭证模板</div>
|
<el-table :data="voucherTemplates" border size="small">
|
<el-table-column prop="name" label="模板名称" min-width="140" />
|
<el-table-column prop="bizScene" label="业务场景" min-width="140" />
|
<el-table-column prop="debit" label="借方科目" min-width="160" />
|
<el-table-column prop="credit" label="贷方科目" min-width="160" />
|
<el-table-column prop="auxDims" label="辅助核算维度" min-width="180">
|
<template #default="scope">
|
<el-space wrap>
|
<el-tag v-for="dim in scope.row.auxDims" :key="dim" size="small" type="info">{{ dim }}</el-tag>
|
</el-space>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="16" class="mb-16">
|
<el-col :span="12">
|
<el-card shadow="hover">
|
<div class="section-title">业务流程 → 凭证自动生成</div>
|
<div class="toolbar">
|
<el-text type="info">演示数据仅用于展示结构与字段</el-text>
|
</div>
|
<el-table :data="generatedVouchers" border size="small">
|
<el-table-column prop="date" label="日期" width="110" />
|
<el-table-column prop="bizScene" label="业务场景" min-width="120" />
|
<el-table-column prop="summary" label="摘要" min-width="160" />
|
<el-table-column prop="amount" label="金额(¥)" width="110" />
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="scope">
|
<el-tag :type="scope.row.status === '已生成' ? 'success' : 'warning'">{{ scope.row.status }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
<el-col :span="12">
|
<el-card shadow="hover">
|
<div class="section-title">多维辅助核算</div>
|
<div class="dims">
|
<el-tag type="success">客户</el-tag>
|
<el-tag type="warning">项目</el-tag>
|
<el-tag type="info">部门</el-tag>
|
<el-tag type="primary">管理员</el-tag>
|
</div>
|
<el-table :data="auxSummary" size="small" border>
|
<el-table-column prop="dimension" label="维度" width="100" />
|
<el-table-column prop="category" label="类别" min-width="140" />
|
<el-table-column prop="debit" label="借方(本期)" width="110" />
|
<el-table-column prop="credit" label="贷方(本期)" width="110" />
|
<el-table-column prop="balance" label="余额" width="100" />
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="16" class="mb-16">
|
<el-col :span="12">
|
<el-card shadow="hover">
|
<div class="section-title">结账任务（月/季/年）</div>
|
<div class="toolbar">
|
<el-space>
|
<el-button size="small" @click="runClose('月结')">执行月结</el-button>
|
<el-button size="small" @click="runClose('季报')">执行季报</el-button>
|
<el-button size="small" @click="runClose('年度结账')">执行年度结账</el-button>
|
</el-space>
|
</div>
|
<el-timeline style="margin-top: 6px;">
|
<el-timeline-item
|
v-for="item in closingTasks"
|
:key="item.id"
|
:type="item.type"
|
:timestamp="item.time"
|
placement="top"
|
>
|
<div class="close-item">
|
<div class="title">{{ item.name }}</div>
|
<el-tag :type="item.status === '完成' ? 'success' : 'info'" size="small">{{ item.status }}</el-tag>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</el-card>
|
</el-col>
|
<el-col :span="12">
|
<el-card shadow="hover">
|
<div class="section-title">审计留痕与审批权限</div>
|
<el-table :data="auditTrail" border size="small">
|
<el-table-column prop="time" label="时间" width="160" />
|
<el-table-column prop="action" label="动作" min-width="160" />
|
<el-table-column prop="bizScene" label="关联业务" min-width="140" />
|
<el-table-column prop="role" label="执行角色" width="120" />
|
<el-table-column prop="result" label="结果" width="100">
|
<template #default="scope">
|
<el-tag :type="scope.row.result === '通过' ? 'success' : (scope.row.result === '驳回' ? 'danger' : 'info')">
|
{{ scope.row.result }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
// 科目树（示例）
|
const accountTree = ref([
|
{ code: '1001', label: '资产', children: [
|
{ code: '100101', label: '库存现金' },
|
{ code: '100102', label: '银行存款' },
|
{ code: '1122', label: '应收账款' },
|
{ code: '1601', label: '固定资产' },
|
]},
|
{ code: '2001', label: '负债', children: [
|
{ code: '2202', label: '应付账款' },
|
{ code: '2241', label: '其他应付款' },
|
]},
|
{ code: '3001', label: '所有者权益', children: [
|
{ code: '3103', label: '本年利润' },
|
]},
|
{ code: '4001', label: '成本费用', children: [
|
{ code: '5601', label: '制造费用' },
|
{ code: '6602', label: '管理费用' },
|
]},
|
])
|
|
// 凭证模板（示例）
|
const voucherTemplates = ref([
|
{ name: '销售收入确认', bizScene: '销售出库', debit: '1122 应收账款', credit: '6001 主营业务收入', auxDims: ['客户','项目'] },
|
{ name: '采购应付确认', bizScene: '采购入库', debit: '1403 在途物资', credit: '2202 应付账款', auxDims: ['项目','部门'] },
|
{ name: '费用报销', bizScene: '费用单', debit: '6602 管理费用', credit: '1002 银行存款', auxDims: ['部门'] },
|
{ name: '固定资产折旧', bizScene: '月末折旧', debit: '6602 管理费用', credit: '1602 累计折旧', auxDims: ['部门'] },
|
])
|
|
// 自动生成的凭证（示例）
|
const generatedVouchers = ref([
|
{ date: '2025-10-01', bizScene: '销售出库', summary: '确认应收与收入', amount: 128000, status: '已生成' },
|
{ date: '2025-10-03', bizScene: '采购入库', summary: '确认到货应付', amount: 56000, status: '已生成' },
|
{ date: '2025-10-05', bizScene: '费用单', summary: '办公费用报销', amount: 3200, status: '已生成' },
|
])
|
|
// 无模拟生成操作，仅展示静态示例数据
|
|
// 辅助核算示例汇总（无个人姓名，仅维度类别）
|
const auxSummary = ref([
|
{ dimension: '客户', category: '重点客户集合', debit: 320000, credit: 210000, balance: 110000 },
|
{ dimension: '项目', category: '项目A', debit: 150000, credit: 120000, balance: 30000 },
|
{ dimension: '部门', category: '运营中心', debit: 42000, credit: 18000, balance: 24000 },
|
{ dimension: '管理员', category: '系统角色', debit: 0, credit: 0, balance: 0 },
|
])
|
|
// 结账任务
|
const closingTasks = ref([
|
{ id: 1, name: '2025年10月 月结', time: '2025-10-31 18:00', status: '完成', type: 'success' },
|
{ id: 2, name: '2025年Q4 季报', time: '2025-12-31 18:00', status: '计划', type: 'info' },
|
{ id: 3, name: '2025年度 年度结账', time: '2025-12-31 23:00', status: '计划', type: 'info' },
|
])
|
|
function runClose(kind) {
|
closingTasks.value.unshift({
|
id: Date.now(),
|
name: `${new Date().getFullYear()}年${kind}`,
|
time: new Date().toISOString().replace('T',' ').slice(0,16),
|
status: '完成',
|
type: 'success',
|
})
|
}
|
|
// 审计留痕（不含个人姓名，仅角色/机制）
|
const auditTrail = ref([
|
{ time: '2025-10-01 09:12', action: '销售出库触发凭证生成', bizScene: '销售出库', role: '系统自动化', result: '通过' },
|
{ time: '2025-10-03 14:20', action: '采购入库触发应付确认', bizScene: '采购入库', role: '系统自动化', result: '通过' },
|
{ time: '2025-10-05 10:03', action: '费用单审批', bizScene: '费用单', role: '财务审批', result: '通过' },
|
{ time: '2025-10-08 16:45', action: '凭证过账', bizScene: '总账', role: '会计审核', result: '通过' },
|
{ time: '2025-10-31 18:05', action: '月结完成并锁账', bizScene: '总账', role: '系统自动化', result: '通过' },
|
])
|
</script>
|
|
<style scoped lang="scss">
|
.app-container {
|
padding: 16px;
|
}
|
.page-header {
|
margin-bottom: 12px;
|
h2 { margin: 0 0 6px 0; font-weight: 600; }
|
p { margin: 0; color: #666; }
|
}
|
.section-title {
|
position: relative;
|
padding-left: 10px;
|
margin-bottom: 10px;
|
font-weight: 700;
|
}
|
.section-title::before {
|
content: '';
|
position: absolute;
|
left: 0; top: 0.2em;
|
width: 4px; height: 1.2em;
|
background: #002FA7;
|
border-radius: 2px;
|
}
|
.mb-16 { margin-bottom: 16px; }
|
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
|
.dims { display: flex; gap: 8px; margin-bottom: 10px; }
|
.close-item { display: flex; align-items: center; gap: 8px; }
|
</style>
|
