sxbh_admin/cma-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新30号准则P2 — MPM计算器+旧格式双列对比

Browse Source
This commit is contained in:
Hermes CI Fix
2026-07-22 12:23:40 +08:00
parent 748c2da43f
commit cbcc0d0a28
5 changed files with 705 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/MpmCalculator.vue
+370
View File
@@ -0,0 +1,370 @@
<template>
<div class="mpm-page">
<div class="mpm-header">
<h3 class="page-title">MPM管理层指标计算器</h3>
<div class="header-right">
<el-date-picker
v-model="period"
type="month"
placeholder="选择月份"
value-format="YYYY-MM"
size="small"
style="width:140px"
/>
<el-button type="primary" size="small" :loading="calculating" @click="calculate">计算</el-button>
</div>
</div>
<el-row :gutter="16">
<!-- 左侧：参数面板 -->
<el-col :span="10">
<el-card class="param-card">
<template #header>
<span>参数设置</span>
</template>
<div class="param-section">
<label class="param-label">选择指标类型</label>
<el-radio-group v-model="indicatorType" class="indicator-types">
<el-radio
v-for="opt in indicatorOptions"
:key="opt.value"
:value="opt.value"
class="indicator-radio"
>
<div class="indicator-opt">
<span class="indicator-name">{{ opt.label }}</span>
<span class="indicator-desc">{{ opt.desc }}</span>
</div>
</el-radio>
</el-radio-group>
</div>
<el-divider />
<div class="param-section">
<label class="param-label">调整项目
<span class="param-hint">勾选需要调整的项目，未勾选的项目不计入调节</span>
</label>
<div class="adjustment-list">
<div v-for="(adj, idx) in adjustments" :key="adj.code" class="adjustment-row">
<el-checkbox v-model="adj.checked" :disabled="adjusting" @change="onAdjustmentChange">
<span :class="{ 'adj-sign-positive': adj.sign > 0, 'adj-sign-negative': adj.sign < 0 }">
{{ adj.sign > 0 ? '加回' : '减' }}
</span>
{{ adj.name }}
</el-checkbox>
<el-input-number
v-model="adj.amount"
:disabled="!adj.checked || adjusting"
size="small"
:min="0"
:precision="2"
controls-position="right"
placeholder="0.00"
style="width:150px"
@change="onAdjustmentChange"
/>
</div>
</div>
<div v-if="adjustments.length === 0" class="empty-hint">该指标类型暂无可选调整项</div>
</div>
<el-divider />
<div style="text-align:right;">
<el-button size="small" @click="resetDefaults">重置默认</el-button>
</div>
</el-card>
</el-col>
<!-- 右侧：调节表结果 -->
<el-col :span="14">
<el-card class="result-card">
<template #header>
<div class="result-header">
<span>调节表（附注披露用）</span>
<el-tag v-if="indicatorType === 'ebitda'" type="warning">EBITDA</el-tag>
<el-tag v-else-if="indicatorType === 'adjusted_net_profit'" type="success">调整后净利润</el-tag>
<el-tag v-else-if="indicatorType === 'free_cash_flow'" type="primary">自由现金流</el-tag>
<el-tag v-else type="info">自定义</el-tag>
</div>
</template>
<div v-loading="calculating">
<div v-if="result" class="reconciliation-table">
<div
v-for="item in result.reconciliation_items"
:key="item.step"
:class="['rec-item', { 'rec-base': item.is_base, 'rec-checked': item.checked && !item.is_base, 'rec-unchecked': !item.checked && !item.is_base }]"
>
<div class="rec-step">
<span v-if="item.is_base" class="rec-dot-base"></span>
<span v-else-if="item.checked" class="rec-dot-checked"></span>
<span v-else class="rec-dot-unchecked"></span>
<span class="rec-name">{{ item.name }}</span>
</div>
<div class="rec-amount" :class="{ 'rec-negative': item.effective != null && item.effective < 0 }">
<template v-if="item.effective != null">
{{ item.sign > 0 && !item.is_base ? '+ ' : '' }}{{ item.sign < 0 && !item.is_base ? '- ' : '' }}¥ {{ Math.abs(item.effective).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
</template>
<span v-else class="rec-no-data">无数据</span>
</div>
<div v-if="item.running_total != null" class="rec-running">
= ¥ {{ item.running_total.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
</div>
</div>
<div class="rec-divider"></div>
<div class="rec-item rec-final">
<div class="rec-step">
<span class="rec-dot-final"></span>
<span class="rec-name rec-final-label">{{ result.final_label }}</span>
</div>
<div class="rec-amount rec-final-amount" :class="{ 'rec-negative': result.final_value < 0 }">
¥ {{ Math.abs(result.final_value).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
</div>
</div>
<div class="rec-summary">
<span class="rec-summary-item">基准值：¥ {{ result.base_value.toLocaleString() }}</span>
<span class="rec-summary-item">调整项：{{ result.adjustment_count }}/{{ result.total_adjustments }}</span>
<span class="rec-summary-item">最终值：¥ {{ result.final_value.toLocaleString() }}</span>
</div>
</div>
<el-empty v-else-if="!calculating" description="选择指标类型，点击「计算」生成合规调节表" />
<div v-if="!result?.has_real_data && result" class="demo-hint">
⚠️ 当前部分数据为示例数据，实际数据将在科目打标后显示
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 底部操作 -->
<div class="mpm-actions" v-if="result">
<el-button type="primary" @click="exportDetail">导出附注明细</el-button>
<el-button @click="saveTemplate">保存为模板</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const api = axios.create({ baseURL: '/api/cma', timeout: 30000 })
api.interceptors.request.use((config: any) => {
const token = localStorage.getItem('cma_token')
if (token) config.headers.Authorization = `Bearer ${token}`
return config
})
// ── 状态 ──
const period = ref('2026-06')
const indicatorType = ref('adjusted_net_profit')
const calculating = ref(false)
const result = ref<any>(null)
const adjusting = ref(false)
const indicatorOptions = [
{ value: 'ebitda', label: 'EBITDA', desc: '息税折旧摊销前利润' },
{ value: 'adjusted_net_profit', label: '调整后净利润', desc: '剔除非经常性项目' },
{ value: 'free_cash_flow', label: '自由现金流', desc: '经营现金流减资本支出' },
{ value: 'custom', label: '自定义', desc: '自定义管理层指标' },
]
// ── 调整项 ──
const adjustments = ref<any[]>([])
// 默认调整项配置
const DEFAULT_ADJUSTMENTS: Record<string, any[]> = {
ebitda: [
{ code: 'tax', name: '加：所得税费用', sign: 1, checked: true, amount: null },
{ code: 'interest', name: '加：利息支出', sign: 1, checked: true, amount: null },
{ code: 'depreciation', name: '加：折旧与摊销', sign: 1, checked: true, amount: null },
{ code: 'impairment', name: '加：资产减值损失', sign: 1, checked: false, amount: null },
],
adjusted_net_profit: [
{ code: 'impairment', name: '加：资产减值损失', sign: 1, checked: true, amount: null },
{ code: 'equity_incentive', name: '加：股权激励费用', sign: 1, checked: true, amount: null },
{ code: 'ma_cost', name: '加：并购相关费用', sign: 1, checked: false, amount: null },
{ code: 'nonrecurring_income', name: '减：非经常性投资收益', sign: -1, checked: true, amount: null },
{ code: 'asset_disposal', name: '减：资产处置收益', sign: -1, checked: false, amount: null },
{ code: 'government_grant', name: '减：政府补助', sign: -1, checked: false, amount: null },
],
free_cash_flow: [
{ code: 'capex', name: '减：资本支出', sign: -1, checked: true, amount: null },
{ code: 'working_capital', name: '减：营运资本增加', sign: -1, checked: true, amount: null },
{ code: 'maintenance_capex', name: '减：维护性资本支出', sign: -1, checked: false, amount: null },
{ code: 'dividend', name: '加：股息收入', sign: 1, checked: false, amount: null },
],
custom: [
{ code: 'adjustment_1', name: '调整项目1', sign: 1, checked: true, amount: null },
{ code: 'adjustment_2', name: '调整项目2', sign: -1, checked: true, amount: null },
{ code: 'adjustment_3', name: '调整项目3', sign: 1, checked: false, amount: null },
],
}
// 切换指标类型时更新调整项
watch(indicatorType, (val) => {
const defaults = DEFAULT_ADJUSTMENTS[val] || DEFAULT_ADJUSTMENTS.adjusted_net_profit
adjustments.value = JSON.parse(JSON.stringify(defaults))
result.value = null
}, { immediate: true })
function resetDefaults() {
const defaults = DEFAULT_ADJUSTMENTS[indicatorType.value] || DEFAULT_ADJUSTMENTS.adjusted_net_profit
adjustments.value = JSON.parse(JSON.stringify(defaults))
calculate()
}
function onAdjustmentChange() {
// 当用户勾选/取消或改金额时自动重新计算
calculate()
}
async function calculate() {
calculating.value = true
try {
const payload = {
indicator_type: indicatorType.value,
period: period.value,
adjustments: adjustments.value.map(a => ({
code: a.code,
name: a.name,
sign: a.sign,
checked: a.checked,
amount: a.amount,
})),
}
const r = await api.post('/reports/mpm-calculate', payload)
result.value = (r as any).data || {}
} catch (e) {
ElMessage.error('计算失败，请检查参数')
result.value = null
} finally {
calculating.value = false
}
}
function exportDetail() {
if (!result.value) return
const items = result.value.reconciliation_items || []
let text = `MPM管理层指标调节表\n`
text += `指标类型：${result.value.indicator_name}\n`
text += `期间：${result.value.period}\n`
text += `基准值（${result.value.base_label}）：¥ ${result.value.base_value.toLocaleString()}\n`
text += `\n调节过程：\n`
text += `──────────────────────────\n`
items.forEach((item: any) => {
if (item.is_base) {
text += `${item.name}\t¥ ${item.amount?.toLocaleString() || '-'}\n`
} else if (item.checked && item.effective != null) {
const signStr = item.sign > 0 ? '+' : '-'
text += ` ${signStr} ${item.name}\t¥ ${Math.abs(item.effective).toLocaleString()}\t余额：¥ ${item.running_total?.toLocaleString() || ''}\n`
}
})
text += `──────────────────────────\n`
text += `${result.value.final_label}\t¥ ${result.value.final_value.toLocaleString()}\n`
// 下载文本文件
const blob = new Blob([text], { type: 'text/plain;charset=utf-8' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `MPM调节表_${result.value.period}_${result.value.indicator_name}.txt`
a.click()
URL.revokeObjectURL(url)
ElMessage.success('调节表明细已导出')
}
function saveTemplate() {
const payload = {
indicator_type: indicatorType.value,
adjustments: adjustments.value,
period: period.value,
}
try {
const saved = JSON.parse(localStorage.getItem('mpm_templates') || '[]')
const name = `${indicatorType.value}_${period.value}_${Date.now()}`
saved.push({ name, data: payload, savedAt: new Date().toISOString() })
localStorage.setItem('mpm_templates', JSON.stringify(saved))
ElMessage.success(`模板已保存：${name}`)
} catch {
ElMessage.error('保存模板失败')
}
}
</script>
<style scoped>
.mpm-page { max-width: 1400px; margin: 0 auto; }
.mpm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.header-right { display: flex; gap: 8px; align-items: center; }
.param-card { min-height: 400px; }
.result-card { min-height: 400px; }
.result-header { display: flex; align-items: center; gap: 8px; }
.param-section { margin-bottom: 8px; }
.param-label { font-size: 14px; font-weight: 600; color: #1a1a2e; display: block; margin-bottom: 8px; }
.param-hint { font-size: 11px; color: #999; font-weight: 400; margin-left: 8px; }
.indicator-types { display: flex; flex-direction: column; gap: 6px; }
.indicator-radio { display: flex; align-items: center; padding: 6px 0; }
.indicator-opt { display: flex; flex-direction: column; }
.indicator-name { font-weight: 600; font-size: 13px; }
.indicator-desc { font-size: 11px; color: #999; }
.adjustment-list { display: flex; flex-direction: column; gap: 6px; }
.adjustment-row {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 8px; border-radius: 4px; transition: background 0.2s;
}
.adjustment-row:hover { background: #f5f7fa; }
.adj-sign-positive { color: #67c23a; font-weight: 600; }
.adj-sign-negative { color: #f56c6c; font-weight: 600; }
.empty-hint { color: #ccc; font-size: 12px; text-align: center; padding: 20px; }
/* 调节表样式 */
.reconciliation-table { padding: 4px 0; }
.rec-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 4px;
margin-bottom: 2px;
transition: background 0.2s;
}
.rec-base { background: #f0f9eb; border-left: 3px solid #67c23a; }
.rec-checked { background: #f5f7fa; border-left: 3px solid #409eff; }
.rec-unchecked { opacity: 0.4; border-left: 3px solid #ddd; }
.rec-final { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 6px; margin-top: 4px; }
.rec-step { flex: 1; display: flex; align-items: center; gap: 6px; }
.rec-dot-base { width: 8px; height: 8px; border-radius: 50%; background: #67c23a; flex-shrink: 0; }
.rec-dot-checked { width: 8px; height: 8px; border-radius: 50%; background: #409eff; flex-shrink: 0; }
.rec-dot-unchecked { width: 8px; height: 8px; border-radius: 50%; background: #ddd; flex-shrink: 0; }
.rec-dot-final { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.rec-name { font-size: 13px; }
.rec-amount { font-size: 13px; font-weight: 500; min-width: 160px; text-align: right; font-variant-numeric: tabular-nums; }
.rec-negative { color: #f56c6c; }
.rec-final .rec-amount { font-size: 16px; font-weight: 700; }
.rec-final .rec-name { font-weight: 700; }
.rec-no-data { color: #999; font-size: 11px; }
.rec-running { font-size: 12px; color: #999; min-width: 160px; text-align: right; font-variant-numeric: tabular-nums; }
.rec-final .rec-running { color: rgba(255,255,255,0.7); }
.rec-divider { height: 1px; background: #ebeef5; margin: 8px 12px; }
.rec-summary {
display: flex; gap: 16px; padding: 8px 12px; margin-top: 8px;
background: #fafafa; border-radius: 4px; font-size: 12px; color: #666;
}
.rec-summary-item { flex: 1; }
.demo-hint { font-size: 11px; color: #d46b08; margin-top: 8px; padding: 4px 12px; background: #fff7e6; border-radius: 4px; }
.mpm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
</style>