feat: 新30号准则P2 — MPM计算器+旧格式双列对比
This commit is contained in:
@@ -5,9 +5,9 @@
|
||||
|
||||
// 各角色可访问的路由列表
|
||||
export const ROLE_ROUTES: Record<string, string[]> = {
|
||||
ceo: ['/my-dashboard', '/dashboard', '/kpis', '/maps', '/maps-review', '/maps/canvas', '/maps/review', '/alerts', '/notifications', '/org', '/users', '/permissions', '/budget', '/deviations', '/cost', '/predict', '/action-plans', '/knowledge', '/guide', '/customer', '/learning-dashboard', '/reports', '/alignment', '/dupont-analysis', '/okr-templates'],
|
||||
finance: ['/my-dashboard', '/dashboard', '/kpis', '/maps', '/maps-review', '/maps/canvas', '/maps/review', '/alerts', '/data', '/budget', '/deviations', '/cost', '/predict', '/action-plans', '/knowledge', '/guide', '/customer', '/learning-dashboard', '/reports', '/alignment', '/dupont-analysis', '/okr-templates'],
|
||||
business: ['/my-dashboard', '/dashboard', '/kpis', '/alerts', '/deviations', '/budget', '/action-plans', '/knowledge', '/guide', '/customer', '/reports', '/alignment'],
|
||||
ceo: ['/my-dashboard', '/dashboard', '/kpis', '/maps', '/maps-review', '/maps/canvas', '/maps/review', '/alerts', '/notifications', '/org', '/users', '/permissions', '/budget', '/deviations', '/cost', '/predict', '/action-plans', '/knowledge', '/guide', '/customer', '/learning-dashboard', '/reports', '/alignment', '/dupont-analysis', '/okr-templates', '/mpm-calculator'],
|
||||
finance: ['/my-dashboard', '/dashboard', '/kpis', '/maps', '/maps-review', '/maps/canvas', '/maps/review', '/alerts', '/data', '/budget', '/deviations', '/cost', '/predict', '/action-plans', '/knowledge', '/guide', '/customer', '/learning-dashboard', '/reports', '/alignment', '/dupont-analysis', '/okr-templates', '/mpm-calculator'],
|
||||
business: ['/my-dashboard', '/dashboard', '/kpis', '/alerts', '/deviations', '/budget', '/action-plans', '/knowledge', '/guide', '/customer', '/reports', '/alignment', '/mpm-calculator'],
|
||||
it: ['/my-dashboard', '/dashboard', '/kpis', '/alerts', '/data', '/org', '/users', '/permissions', '/budget', '/deviations', '/cost', '/predict', '/action-plans', '/knowledge', '/guide', '/customer', '/learning-dashboard', '/okr-templates'],
|
||||
}
|
||||
|
||||
@@ -62,6 +62,7 @@ export const MENU_ITEMS: MenuItem[] = [
|
||||
{ path: '/maps-review', label: '战略回顾会', icon: 'TrendCharts', roles: ['ceo', 'finance'], group: '🔴 A 复盘与改进' },
|
||||
{ path: '/predict', label: '预测模拟', icon: 'DataLine', roles: ['ceo', 'finance', 'it'], group: '🔴 A 复盘与改进' },
|
||||
{ path: '/real-options', label: '实物期权计算器', icon: 'TrendCharts', roles: ['ceo', 'finance'], group: '🔴 A 复盘与改进' },
|
||||
{ path: '/mpm-calculator', label: 'MPM计算器', icon: 'Money', roles: ['ceo', 'finance', 'business'], group: '🔴 A 复盘与改进' },
|
||||
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
// GROUP 5: 系统与支持(Infra)
|
||||
|
||||
@@ -37,6 +37,7 @@ const routes = [
|
||||
{ path: 'bi-reports', name: 'BiReports', component: () => import('@/views/BIReportCenter.vue'), meta: { title: 'BI报表', roles: ['ceo', 'finance', 'business'] } },
|
||||
{ path: 'okr-templates', name: 'OKRTemplates', component: () => import('@/views/OKRTemplates.vue'), meta: { title: 'OKR模板库', roles: ['ceo', 'finance', 'it'] } },
|
||||
{ path: 'subjects', name: 'SubjectManage', component: () => import('@/views/SubjectManage.vue'), meta: { title: '科目打标', roles: ['ceo', 'finance', 'business', 'it'] } },
|
||||
{ path: 'mpm-calculator', name: 'MpmCalculator', component: () => import('@/views/MpmCalculator.vue'), meta: { title: 'MPM计算器', roles: ['ceo', 'finance', 'business'] } },
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
@@ -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>
|
||||
@@ -92,7 +92,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="new30-net-profit">
|
||||
<div class="new30-net-profit" v-if="new30Format !== 'dual'">
|
||||
<div class="new30-profit-row">
|
||||
<span class="new30-profit-label">合计:</span>
|
||||
<span class="new30-profit-value" :class="{ negative: new30NetProfit < 0 }">
|
||||
@@ -102,9 +102,57 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 双列对比模式 -->
|
||||
<div v-if="new30Format === 'dual' && dualComparisonData" class="dual-comparison">
|
||||
<div class="dual-desc">新旧准则双列对比 — 旧准则(一行到底) vs 新准则(五板块)</div>
|
||||
|
||||
<div class="dual-grid">
|
||||
<!-- 旧准则列 -->
|
||||
<div class="dual-col">
|
||||
<div class="dual-col-header old-col">旧准则格式</div>
|
||||
<el-table :data="dualComparisonData.old_format?.items || []" border stripe size="small" style="width:100%;">
|
||||
<el-table-column prop="name" label="项目" width="180">
|
||||
<template #default="{ row }">
|
||||
<span :style="{ fontWeight: row.is_total ? 700 : row.is_subtotal ? 600 : 400 }">{{ row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="金额" width="140" align="right">
|
||||
<template #default="{ row }">
|
||||
<span :style="{ fontWeight: row.is_total ? 700 : 400 }">
|
||||
{{ row.value != null ? '¥ ' + row.value.toLocaleString() : '-' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 新准则列 -->
|
||||
<div class="dual-col">
|
||||
<div class="dual-col-header new-col">新30号准则格式</div>
|
||||
<div class="dual-blocks">
|
||||
<div v-for="block in dualComparisonData.new_format?.blocks || []" :key="block.key" class="dual-block">
|
||||
<div class="dual-block-header">
|
||||
<span class="dual-block-name">{{ block.short_name }}</span>
|
||||
<span class="dual-block-subtotal">{{ formatMoney(block.subtotal) }}</span>
|
||||
</div>
|
||||
<div v-for="item in block.items" :key="item.code" class="dual-block-item">
|
||||
<span class="dual-item-name">{{ item.name }}</span>
|
||||
<span class="dual-item-amount">{{ item.effective != null ? formatMoney(item.effective) : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dual-net-profit">
|
||||
<span>净利润:</span>
|
||||
<span class="dual-net-val">{{ formatMoney(dualComparisonData.new_format?.net_profit) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="new30-footer">
|
||||
<el-button size="small" :type="new30Format === 'new' ? 'primary' : ''" @click="switchNew30Format('new')">新准则</el-button>
|
||||
<el-button size="small" :type="new30Format === 'old' ? 'primary' : ''" @click="switchNew30Format('old')">旧准则对比</el-button>
|
||||
<el-button size="small" :type="new30Format === 'old' ? 'primary' : ''" @click="switchNew30Format('old')">旧准则</el-button>
|
||||
<el-button size="small" :type="new30Format === 'dual' ? 'primary' : ''" @click="switchNew30Format('dual')">双列对比</el-button>
|
||||
<el-button size="small" @click="exportNew30">导出</el-button>
|
||||
<span v-if="new30DemoMode" class="new30-demo-hint">⚠️ 当前显示示例数据,科目打标后显示实际数据</span>
|
||||
</div>
|
||||
@@ -357,20 +405,36 @@ const new30Blocks = ref<any[]>([])
|
||||
const new30NetProfit = ref(0)
|
||||
const new30Format = ref('new')
|
||||
const new30DemoMode = ref(false)
|
||||
const dualComparisonData = ref<any>(null)
|
||||
|
||||
async function loadNew30() {
|
||||
loadingNew30.value = true
|
||||
dualComparisonData.value = null
|
||||
try {
|
||||
const r = await api.get('/reports/profit-statement', {
|
||||
params: { period: reportPeriod.value, format: 'new' }
|
||||
})
|
||||
const params: any = { period: reportPeriod.value }
|
||||
if (new30Format.value === 'dual') {
|
||||
params.format = 'dual'
|
||||
} else {
|
||||
params.format = 'new'
|
||||
}
|
||||
const r = await api.get('/reports/profit-statement', { params })
|
||||
const d = (r as any).data || {}
|
||||
new30Blocks.value = d.blocks || []
|
||||
new30NetProfit.value = d.net_profit ?? 0
|
||||
new30DemoMode.value = !d.all_items_have_data
|
||||
|
||||
if (new30Format.value === 'dual') {
|
||||
dualComparisonData.value = d
|
||||
new30Blocks.value = d.new_format?.blocks || []
|
||||
new30NetProfit.value = d.new_format?.net_profit ?? 0
|
||||
new30DemoMode.value = !d.new_format?.all_items_have_data
|
||||
} else {
|
||||
dualComparisonData.value = null
|
||||
new30Blocks.value = d.blocks || []
|
||||
new30NetProfit.value = d.net_profit ?? 0
|
||||
new30DemoMode.value = !d.all_items_have_data
|
||||
}
|
||||
} catch (e) {
|
||||
new30Blocks.value = []
|
||||
new30NetProfit.value = 0
|
||||
dualComparisonData.value = null
|
||||
ElMessage.error('加载新30号准则利润表失败')
|
||||
} finally {
|
||||
loadingNew30.value = false
|
||||
@@ -387,7 +451,7 @@ function formatMoney(val: number): string {
|
||||
|
||||
function switchNew30Format(fmt: string) {
|
||||
new30Format.value = fmt
|
||||
if (fmt === 'new') {
|
||||
if (fmt === 'new' || fmt === 'dual') {
|
||||
loadNew30()
|
||||
} else {
|
||||
// 切换到旧准则tab
|
||||
@@ -710,4 +774,23 @@ onMounted(() => {
|
||||
.restate-dot-red { background: #cf1322; }
|
||||
.restate-dot-green { background: #389e0d; }
|
||||
.restate-dot-orange { background: #d46b08; }
|
||||
|
||||
/* 双列对比样式 */
|
||||
.dual-comparison { margin-top: 12px; }
|
||||
.dual-desc { font-size: 13px; color: #888; margin-bottom: 12px; }
|
||||
.dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
@media screen and (max-width: 1000px) { .dual-grid { grid-template-columns: 1fr; } }
|
||||
.dual-col { background: #fff; border-radius: 8px; border: 1px solid #ebeef5; overflow: hidden; }
|
||||
.dual-col-header { padding: 10px 14px; font-weight: 600; font-size: 14px; color: #fff; }
|
||||
.dual-col-header.old-col { background: #909399; }
|
||||
.dual-col-header.new-col { background: #409eff; }
|
||||
.dual-blocks { padding: 8px; }
|
||||
.dual-block { margin-bottom: 8px; border: 1px solid #ebeef5; border-radius: 4px; overflow: hidden; }
|
||||
.dual-block-header { display: flex; justify-content: space-between; padding: 6px 10px; background: #f9fafc; font-size: 13px; font-weight: 600; }
|
||||
.dual-block-subtotal { color: #1a1a2e; }
|
||||
.dual-block-item { display: flex; justify-content: space-between; padding: 4px 10px 4px 16px; font-size: 12px; color: #555; border-top: 1px dashed #f0f0f0; }
|
||||
.dual-item-name { flex: 1; }
|
||||
.dual-item-amount { font-weight: 500; }
|
||||
.dual-net-profit { padding: 10px 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 4px; margin: 8px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.dual-net-val { font-size: 18px; font-weight: 700; flex: 1; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user