feat: 增强风险规则生成引擎与预算中心页面
后端拆分风险规则生成为解释器、语义分析、本体对齐等子模块， 优化模板执行和流程图生成，完善员工种子数据和导入逻辑，增强 报销单权限策略和草稿持久化，前端新增预算中心视图和趋势图 组件，重构审计页面和风险规则测试对话框交互，完善文档中心 和报销创建页面细节，补充单元测试覆盖。
This commit is contained in:
caoxiaozhu
216
web/src/views/scripts/BudgetCenterView.js
Normal file
216
web/src/views/scripts/BudgetCenterView.js
Normal file
@@ -0,0 +1,216 @@
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
import BudgetTrendChart from '../../components/charts/BudgetTrendChart.vue'
|
||||
import { fetchEmployeeMeta } from '../../services/employees.js'
|
||||
|
||||
const FALLBACK_DEPARTMENTS = [
|
||||
{ code: 'MARKET-DEPT', name: '市场部', costCenter: 'CC-4100' },
|
||||
{ code: 'FINANCE-DEPT', name: '财务部', costCenter: 'CC-2100' },
|
||||
{ code: 'TECH-DEPT', name: '技术部', costCenter: 'CC-6100' },
|
||||
{ code: 'HR-DEPT', name: '人力资源部', costCenter: 'CC-3200' },
|
||||
{ code: 'PRODUCTION-DEPT', name: '生产部', costCenter: 'CC-7200' },
|
||||
{ code: 'PRESIDENT-OFFICE', name: '总裁办', costCenter: 'CC-1000' }
|
||||
]
|
||||
|
||||
const EXPENSE_BLUEPRINTS = [
|
||||
{ expenseType: '市场推广费', total: 500000, used: 186400, occupied: 120000, warning: 80, action: '提醒' },
|
||||
{ expenseType: '差旅费', total: 600000, used: 242300, occupied: 150000, warning: 80, action: '提醒' },
|
||||
{ expenseType: '办公费', total: 300000, used: 68500, occupied: 60000, warning: 70, action: '正常' },
|
||||
{ expenseType: '培训费', total: 200000, used: 42300, occupied: 20000, warning: 70, action: '正常' },
|
||||
{ expenseType: '软件服务费', total: 600000, used: 249500, occupied: 240800, warning: 80, action: '管控' }
|
||||
]
|
||||
|
||||
const currency = (value) =>
|
||||
Number(value || 0).toLocaleString('zh-CN', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
})
|
||||
|
||||
function buildDepartmentRows(departmentCode) {
|
||||
const seed = Array.from(String(departmentCode || '')).reduce((sum, char) => sum + char.charCodeAt(0), 0)
|
||||
const factor = 0.88 + (seed % 18) / 100
|
||||
|
||||
return EXPENSE_BLUEPRINTS.map((item, index) => {
|
||||
const totalAmount = Math.round(item.total * factor)
|
||||
const usedAmount = Math.round(item.used * (0.9 + ((seed + index) % 12) / 100))
|
||||
const occupiedAmount = Math.round(item.occupied * (0.92 + ((seed + index * 3) % 10) / 100))
|
||||
const leftAmount = Math.max(totalAmount - usedAmount - occupiedAmount, 0)
|
||||
const rate = Number((((usedAmount + occupiedAmount) / totalAmount) * 100).toFixed(2))
|
||||
|
||||
return {
|
||||
...item,
|
||||
totalAmount,
|
||||
usedAmount,
|
||||
occupiedAmount,
|
||||
leftAmount,
|
||||
rate,
|
||||
rateTone: rate >= item.warning ? 'danger' : rate >= item.warning - 12 ? 'warn' : 'ok',
|
||||
warningTone: item.warning >= 80 ? 'budget-warning-red' : 'budget-warning-yellow',
|
||||
warningLine: `${item.warning}%`,
|
||||
total: currency(totalAmount),
|
||||
used: currency(usedAmount),
|
||||
occupied: currency(occupiedAmount),
|
||||
left: currency(leftAmount)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function buildTrendData(rows) {
|
||||
const total = rows.reduce((sum, item) => sum + item.totalAmount, 0)
|
||||
const used = rows.reduce((sum, item) => sum + item.usedAmount + item.occupiedAmount, 0)
|
||||
|
||||
return {
|
||||
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
budget: [0.05, 0.18, 0.25, 0.34, 0.45, 0.52, 0.68, 0.76, 0.84, 0.91, 0.96, 1].map((ratio) =>
|
||||
Math.round(total * ratio)
|
||||
),
|
||||
used: [0.03, 0.1, 0.13, 0.22, 0.3, 0.37, 0.51, 0.59, 0.69, 0.73, 0.86, 0.96].map((ratio) =>
|
||||
Math.round(used * ratio)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'BudgetCenterView',
|
||||
components: {
|
||||
BudgetTrendChart
|
||||
},
|
||||
setup() {
|
||||
const departments = ref(FALLBACK_DEPARTMENTS)
|
||||
const activeDepartmentCode = ref(FALLBACK_DEPARTMENTS[0].code)
|
||||
const departmentKeyword = ref('')
|
||||
const filters = ref({
|
||||
period: '2026年度',
|
||||
expenseType: '全部',
|
||||
status: '全部'
|
||||
})
|
||||
|
||||
const activeDepartment = computed(() =>
|
||||
departments.value.find((item) => item.code === activeDepartmentCode.value) || departments.value[0]
|
||||
)
|
||||
|
||||
const activeDepartmentName = computed(() => activeDepartment.value?.name || '市场部')
|
||||
const departmentRows = computed(() => buildDepartmentRows(activeDepartment.value?.code || activeDepartmentCode.value))
|
||||
const visibleBudgetRows = computed(() =>
|
||||
departmentRows.value
|
||||
.filter((row) => filters.value.expenseType === '全部' || row.expenseType === filters.value.expenseType)
|
||||
.filter((row) => {
|
||||
if (filters.value.status === '全部') return true
|
||||
if (filters.value.status === '预警') return row.rateTone === 'warn'
|
||||
if (filters.value.status === '管控') return row.rateTone === 'danger'
|
||||
return row.rateTone === 'ok'
|
||||
})
|
||||
)
|
||||
|
||||
const totals = computed(() => {
|
||||
const rows = departmentRows.value
|
||||
const total = rows.reduce((sum, item) => sum + item.totalAmount, 0)
|
||||
const used = rows.reduce((sum, item) => sum + item.usedAmount, 0)
|
||||
const occupied = rows.reduce((sum, item) => sum + item.occupiedAmount, 0)
|
||||
return {
|
||||
total,
|
||||
used,
|
||||
occupied,
|
||||
left: Math.max(total - used - occupied, 0)
|
||||
}
|
||||
})
|
||||
|
||||
const budgetMetrics = computed(() => [
|
||||
{
|
||||
label: '预算总额',
|
||||
value: `¥${currency(totals.value.total)}`,
|
||||
note: '本年累计',
|
||||
tone: 'green',
|
||||
icon: 'mdi mdi-wallet-outline'
|
||||
},
|
||||
{
|
||||
label: '已发生',
|
||||
value: `¥${currency(totals.value.used)}`,
|
||||
note: `占比 ${((totals.value.used / totals.value.total) * 100).toFixed(2)}%`,
|
||||
tone: 'blue',
|
||||
icon: 'mdi mdi-chart-line'
|
||||
},
|
||||
{
|
||||
label: '已占用',
|
||||
value: `¥${currency(totals.value.occupied)}`,
|
||||
note: `占比 ${((totals.value.occupied / totals.value.total) * 100).toFixed(2)}%`,
|
||||
tone: 'orange',
|
||||
icon: 'mdi mdi-briefcase-check-outline'
|
||||
},
|
||||
{
|
||||
label: '剩余可用',
|
||||
value: `¥${currency(totals.value.left)}`,
|
||||
note: `占比 ${((totals.value.left / totals.value.total) * 100).toFixed(2)}%`,
|
||||
tone: 'green',
|
||||
icon: 'mdi mdi-currency-cny'
|
||||
}
|
||||
])
|
||||
|
||||
const visibleDepartments = computed(() => {
|
||||
const keyword = departmentKeyword.value.trim()
|
||||
return departments.value
|
||||
.filter((item) => !keyword || item.name.includes(keyword) || item.code.includes(keyword))
|
||||
.map((item) => ({
|
||||
...item,
|
||||
icon: item.code === activeDepartmentCode.value ? 'mdi mdi-account-group-outline' : 'mdi mdi-domain'
|
||||
}))
|
||||
})
|
||||
|
||||
const warnings = computed(() =>
|
||||
departmentRows.value
|
||||
.slice()
|
||||
.sort((a, b) => b.rate - a.rate)
|
||||
.slice(0, 4)
|
||||
.map((row, index) => ({
|
||||
title: row.expenseType,
|
||||
desc: `使用率已达 ${row.rate}%，${row.rate >= row.warning ? '已超过预警线' : '接近预警线'}（${row.warningLine}）`,
|
||||
date: index < 2 ? '2026-05-12' : '2026-05-10',
|
||||
tone: row.rate >= row.warning ? 'danger' : row.rate >= row.warning - 12 ? 'warn' : 'ok'
|
||||
}))
|
||||
)
|
||||
|
||||
const trendData = computed(() => buildTrendData(departmentRows.value))
|
||||
|
||||
async function loadDepartments() {
|
||||
try {
|
||||
const payload = await fetchEmployeeMeta()
|
||||
const options = Array.isArray(payload?.organizationOptions) ? payload.organizationOptions : []
|
||||
const nextDepartments = options
|
||||
.filter((item) => item?.code && item?.name)
|
||||
.map((item) => ({
|
||||
code: String(item.code),
|
||||
name: String(item.name),
|
||||
costCenter: String(item.costCenter || '')
|
||||
}))
|
||||
|
||||
if (nextDepartments.length) {
|
||||
departments.value = nextDepartments
|
||||
if (!nextDepartments.some((item) => item.code === activeDepartmentCode.value)) {
|
||||
activeDepartmentCode.value = nextDepartments[0].code
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to load budget departments from employee meta:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadDepartments()
|
||||
})
|
||||
|
||||
return {
|
||||
activeDepartmentCode,
|
||||
activeDepartmentName,
|
||||
budgetMetrics,
|
||||
departmentKeyword,
|
||||
expenseTypes: ['全部', ...EXPENSE_BLUEPRINTS.map((item) => item.expenseType)],
|
||||
filters,
|
||||
periods: ['2026年度', '2026年Q2', '2026年5月'],
|
||||
statuses: ['全部', '正常', '预警', '管控'],
|
||||
trendData,
|
||||
visibleBudgetRows,
|
||||
visibleDepartments,
|
||||
warnings
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user