- KPIAlignment.vue: 移除页头切换按钮与模式选择器,去 saveAlignConfig;新增右下浮窗 - BudgetManagement.vue: 预算模式 el-switch -> 只读标签,去 onBudgetModeChange;新增右下浮窗 - RolePermissions.vue: 保留目标对齐正本,新增「预算模式」Tab(系统级切换入口) - 仅 frontend/ 三件;build 通过
This commit is contained in:
committed by
Hermes CI Fix
parent
424c33c085
commit
26db15e6d3
@@ -1,6 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h3>预算管理</h3>
|
<h3>预算管理</h3>
|
||||||
|
|
||||||
|
<!-- 系统级设置提醒:右下角浮窗(仅提示,切换入口在【系统设置】) -->
|
||||||
|
<div v-if="sysHintVisible" class="sys-setting-hint">
|
||||||
|
<div class="hint-title">预算模式:{{ budgetMode === 'rolling' ? '滚动预算' : '固定预算' }}</div>
|
||||||
|
<div class="hint-text">系统级设置,影响全部账套 · 如需更改请到【系统设置 → 预算模式】</div>
|
||||||
|
<el-button text size="small" class="hint-close" @click="dismissSysHint">关闭</el-button>
|
||||||
|
</div>
|
||||||
<div v-if="noMap" style="padding:60px 0;text-align:center;color:#999;">
|
<div v-if="noMap" style="padding:60px 0;text-align:center;color:#999;">
|
||||||
<p style="font-size:16px;margin-bottom:12px;">暂无已发布的战略地图</p>
|
<p style="font-size:16px;margin-bottom:12px;">暂无已发布的战略地图</p>
|
||||||
<p style="font-size:13px;">预算编制需要基于已发布的战略地图,请先在【战略地图】中创建并发布</p>
|
<p style="font-size:13px;">预算编制需要基于已发布的战略地图,请先在【战略地图】中创建并发布</p>
|
||||||
@@ -35,16 +42,10 @@
|
|||||||
<el-divider direction="vertical" />
|
<el-divider direction="vertical" />
|
||||||
<div style="display:flex;align-items:center;gap:6px;font-size:12px;">
|
<div style="display:flex;align-items:center;gap:6px;font-size:12px;">
|
||||||
<span style="color:#909399;">预算模式:</span>
|
<span style="color:#909399;">预算模式:</span>
|
||||||
<el-switch
|
<el-tag size="small" :type="budgetMode === 'rolling' ? 'warning' : 'info'" effect="plain">
|
||||||
v-model="budgetMode"
|
{{ budgetMode === 'rolling' ? '滚动预算(滚动12月)' : '固定预算(固定年度)' }}
|
||||||
active-value="rolling"
|
</el-tag>
|
||||||
inactive-value="fixed"
|
<span style="color:#c0c4cc;">系统级设置,影响全部账套 · 更改请到【系统设置】</span>
|
||||||
active-text="滚动预算"
|
|
||||||
inactive-text="固定预算"
|
|
||||||
@change="onBudgetModeChange"
|
|
||||||
/>
|
|
||||||
<el-tag v-if="budgetMode === 'rolling'" size="small" type="warning" effect="plain">滚动12月</el-tag>
|
|
||||||
<el-tag v-else size="small" type="info" effect="plain">固定年度</el-tag>
|
|
||||||
</div>
|
</div>
|
||||||
<el-button v-if="budgetMode === 'rolling'" size="small" type="warning" @click="doRollForward" :loading="rollingForward">延展</el-button>
|
<el-button v-if="budgetMode === 'rolling'" size="small" type="warning" @click="doRollForward" :loading="rollingForward">延展</el-button>
|
||||||
</div>
|
</div>
|
||||||
@@ -1148,6 +1149,13 @@ async function confirmMethod() {
|
|||||||
|
|
||||||
// ── 滚动/固定预算切换 ──
|
// ── 滚动/固定预算切换 ──
|
||||||
const budgetMode = ref('fixed')
|
const budgetMode = ref('fixed')
|
||||||
|
// 系统级设置提醒(右下角浮窗;仅提示,不提供切换;同会话不重复骚扰)
|
||||||
|
const SYS_HINT_KEY = 'cma-sys-hint-dismissed:budget'
|
||||||
|
const sysHintVisible = ref((() => { try { return sessionStorage.getItem(SYS_HINT_KEY) !== '1' } catch { return true } })())
|
||||||
|
function dismissSysHint() {
|
||||||
|
sysHintVisible.value = false
|
||||||
|
try { sessionStorage.setItem(SYS_HINT_KEY, '1') } catch {}
|
||||||
|
}
|
||||||
const rollingForward = ref(false)
|
const rollingForward = ref(false)
|
||||||
|
|
||||||
async function loadBudgetConfig() {
|
async function loadBudgetConfig() {
|
||||||
@@ -1157,17 +1165,6 @@ async function loadBudgetConfig() {
|
|||||||
} catch { budgetMode.value = 'fixed' }
|
} catch { budgetMode.value = 'fixed' }
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onBudgetModeChange(mode: string) {
|
|
||||||
try {
|
|
||||||
await budgetApi.setConfig({ mode, rolling_months: 12 })
|
|
||||||
ElMessage.success(`预算模式已切换为${mode === 'rolling' ? '滚动预算' : '固定预算'}`)
|
|
||||||
loadBudget()
|
|
||||||
} catch (e: any) {
|
|
||||||
budgetMode.value = mode === 'rolling' ? 'fixed' : 'rolling'
|
|
||||||
ElMessage.error(e?.response?.data?.detail || '切换失败')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function doRollForward() {
|
async function doRollForward() {
|
||||||
rollingForward.value = true
|
rollingForward.value = true
|
||||||
try {
|
try {
|
||||||
@@ -1733,4 +1730,15 @@ onMounted(async () => {
|
|||||||
.strategy-obj-block:not(:last-child) { border-bottom: 1px solid #f0f0f0; }
|
.strategy-obj-block:not(:last-child) { border-bottom: 1px solid #f0f0f0; }
|
||||||
.strategy-obj-header { padding: 6px 0 8px; font-size: 13px; color: #555; font-weight: 500; }
|
.strategy-obj-header { padding: 6px 0 8px; font-size: 13px; color: #555; font-weight: 500; }
|
||||||
.strategy-obj-name::before { content: '◆ '; color: #999; font-size: 10px; }
|
.strategy-obj-name::before { content: '◆ '; color: #999; font-size: 10px; }
|
||||||
|
|
||||||
|
/* 右下角系统级设置提醒浮窗(只读提示) */
|
||||||
|
.sys-setting-hint {
|
||||||
|
position: fixed; right: 20px; bottom: 20px; z-index: 2000;
|
||||||
|
background: #fff; border: 1px solid #e4e7ed; border-left: 4px solid #409eff;
|
||||||
|
border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
|
||||||
|
padding: 10px 14px; max-width: 340px;
|
||||||
|
}
|
||||||
|
.sys-setting-hint .hint-title { font-size: 13px; font-weight: 600; color: #303133; }
|
||||||
|
.sys-setting-hint .hint-text { font-size: 12px; color: #909399; line-height: 1.6; margin-top: 2px; }
|
||||||
|
.sys-setting-hint .hint-close { margin-top: 4px; padding: 0; height: auto; }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,46 +3,21 @@
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h3>战略执行看板</h3>
|
<h3>战略执行看板</h3>
|
||||||
<div>
|
<div>
|
||||||
<el-button v-if="alignConfigured" @click="loadTree" :loading="loading" :disabled="loading" style="margin-right:8px;">
|
<el-button v-if="alignConfigured" @click="loadTree" :loading="loading" :disabled="loading">
|
||||||
刷新数据
|
刷新数据
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="primary" @click="showSelector = true">
|
|
||||||
{{ alignConfigured ? '切换模式' : '配置对齐模式' }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 模式选择器 -->
|
<!-- 系统级设置提醒:右下角浮窗(仅提示,切换入口在【系统设置→目标对齐】) -->
|
||||||
<div v-if="showSelector" class="align-setup">
|
<div v-if="sysHintVisible" class="sys-setting-hint">
|
||||||
<el-alert v-if="!alignConfigured" title="系统尚未配置KPI对齐模式" type="warning" :closable="false" show-icon class="section-gap" />
|
<div class="hint-title">对齐模式:{{ currentMode?.name || '未配置' }}</div>
|
||||||
<el-alert type="info" :closable="false" show-icon title="系统级设置,影响全部账套"
|
<div class="hint-text">系统级设置,影响全部账套 · 如需更改请到【系统设置 → 目标对齐】</div>
|
||||||
description="对齐模式保存在系统级配置中,切换后将同时作用于全部账套。" style="margin-bottom:12px;" />
|
<el-button text size="small" class="hint-close" @click="dismissSysHint">关闭</el-button>
|
||||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
|
|
||||||
<el-card v-for="mode in alignModes" :key="mode.key"
|
|
||||||
:class="{ 'mode-card': true, 'selected-mode': selectedMode === mode.key }"
|
|
||||||
shadow="hover" @click="selectedMode = mode.key"
|
|
||||||
>
|
|
||||||
<template #header>
|
|
||||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
|
||||||
<span style="font-weight:600;">{{ mode.name }}</span>
|
|
||||||
<el-radio :model-value="selectedMode === mode.key" :label="mode.key"> </el-radio>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<p style="font-size:13px;color:#666;line-height:1.6;">{{ mode.description }}</p>
|
|
||||||
<el-tag type="info" size="small">示例</el-tag>
|
|
||||||
<p style="font-size:12px;color:#999;margin-top:4px;background:#f5f7fa;padding:6px 8px;border-radius:4px;">{{ mode.example }}</p>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top:16px;display:flex;gap:12px;">
|
|
||||||
<el-button type="primary" size="large" @click="saveAlignConfig" :loading="saving" :disabled="!selectedMode">
|
|
||||||
{{ alignConfigured ? '切换为「' + selectedModeName + '」' : '确定并启用「' + selectedModeName + '」' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button v-if="alignConfigured" @click="showSelector = false; selectedMode = currentMode?.key || ''">取消</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 看板主体 -->
|
<!-- 看板主体 -->
|
||||||
<div v-else>
|
<div>
|
||||||
<!-- 地图选择器 -->
|
<!-- 地图选择器 -->
|
||||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;">
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;">
|
||||||
<span style="font-size:13px;color:#666;white-space:nowrap;">筛选地图:</span>
|
<span style="font-size:13px;color:#666;white-space:nowrap;">筛选地图:</span>
|
||||||
@@ -138,7 +113,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted } from 'vue'
|
import { ref, computed, onMounted } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
// 统一走 api/index.ts 的 axios 实例(拦截器自动带 Bearer / 401 跳登录)
|
// 统一走 api/index.ts 的 axios 实例(拦截器自动带 Bearer / 401 跳登录)
|
||||||
import { alignmentApi, mapApi } from '../api/index'
|
import { alignmentApi, mapApi } from '../api/index'
|
||||||
|
|
||||||
@@ -149,10 +124,15 @@ const alignModes = ref<any[]>([])
|
|||||||
const alignConfigured = ref(false)
|
const alignConfigured = ref(false)
|
||||||
const currentMode = ref<any>(null)
|
const currentMode = ref<any>(null)
|
||||||
const selectedMode = ref('')
|
const selectedMode = ref('')
|
||||||
const saving = ref(false)
|
// 系统级设置提醒(右下角浮窗;仅提示,不提供切换;同会话不重复骚扰)
|
||||||
|
const SYS_HINT_KEY = 'cma-sys-hint-dismissed:alignment'
|
||||||
|
const sysHintVisible = ref((() => { try { return sessionStorage.getItem(SYS_HINT_KEY) !== '1' } catch { return true } })())
|
||||||
|
function dismissSysHint() {
|
||||||
|
sysHintVisible.value = false
|
||||||
|
try { sessionStorage.setItem(SYS_HINT_KEY, '1') } catch {}
|
||||||
|
}
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const treeData = ref<any>(null)
|
const treeData = ref<any>(null)
|
||||||
const showSelector = ref(false)
|
|
||||||
|
|
||||||
// 地图选择
|
// 地图选择
|
||||||
const mapList = ref<any[]>([])
|
const mapList = ref<any[]>([])
|
||||||
@@ -281,34 +261,10 @@ async function loadConfig() {
|
|||||||
currentMode.value = alignModes.value.find(m => m.key === r.mode.mode) || null
|
currentMode.value = alignModes.value.find(m => m.key === r.mode.mode) || null
|
||||||
selectedMode.value = r.mode.mode
|
selectedMode.value = r.mode.mode
|
||||||
}
|
}
|
||||||
showSelector.value = !r.configured
|
|
||||||
if (r.configured) loadTree()
|
if (r.configured) loadTree()
|
||||||
} catch {}
|
} catch {}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function saveAlignConfig() {
|
|
||||||
if (!selectedMode.value) return
|
|
||||||
// 系统级设置二次确认:对齐模式存于全局配置(role_permissions 无 entity_id),切换影响全部账套
|
|
||||||
try {
|
|
||||||
await ElMessageBox.confirm(
|
|
||||||
`对齐模式为系统级设置,切换后将立即作用于全部账套。确认切换为「${selectedModeName.value}」?`,
|
|
||||||
'系统级设置二次确认',
|
|
||||||
{ type: 'warning', confirmButtonText: '确认切换', cancelButtonText: '取消' }
|
|
||||||
)
|
|
||||||
} catch { return }
|
|
||||||
saving.value = true
|
|
||||||
try {
|
|
||||||
// 修复:原 `'Bearer ' + token` 模板字面量 bug(header 值被写死成字面量 → 必 401)
|
|
||||||
await alignmentApi.saveConfig({ mode: selectedMode.value })
|
|
||||||
ElMessage.success('对齐模式已设置')
|
|
||||||
currentMode.value = alignModes.value.find(m => m.key === selectedMode.value) || null
|
|
||||||
alignConfigured.value = true
|
|
||||||
showSelector.value = false
|
|
||||||
loadTree()
|
|
||||||
} catch { ElMessage.error('设置失败') }
|
|
||||||
saving.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadTree() {
|
async function loadTree() {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
@@ -365,4 +321,15 @@ onMounted(() => {
|
|||||||
.dev-red { background: #fef0f0; color: #f56c6c; }
|
.dev-red { background: #fef0f0; color: #f56c6c; }
|
||||||
.dev-yellow { background: #fdf6ec; color: #e6a23c; }
|
.dev-yellow { background: #fdf6ec; color: #e6a23c; }
|
||||||
.dev-green { background: #f0f9eb; color: #67c23a; }
|
.dev-green { background: #f0f9eb; color: #67c23a; }
|
||||||
|
|
||||||
|
/* 右下角系统级设置提醒浮窗(只读提示) */
|
||||||
|
.sys-setting-hint {
|
||||||
|
position: fixed; right: 20px; bottom: 20px; z-index: 2000;
|
||||||
|
background: #fff; border: 1px solid #e4e7ed; border-left: 4px solid #409eff;
|
||||||
|
border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
|
||||||
|
padding: 10px 14px; max-width: 340px;
|
||||||
|
}
|
||||||
|
.sys-setting-hint .hint-title { font-size: 13px; font-weight: 600; color: #303133; }
|
||||||
|
.sys-setting-hint .hint-text { font-size: 12px; color: #909399; line-height: 1.6; margin-top: 2px; }
|
||||||
|
.sys-setting-hint .hint-close { margin-top: 4px; padding: 0; height: auto; }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -134,6 +134,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<!-- Tab 3: 预算模式(系统级) -->
|
||||||
|
<el-tab-pane label="预算模式" name="budget">
|
||||||
|
<p style="color:#999;font-size:13px;margin-top:4px;">
|
||||||
|
系统级设置,影响全部账套。业务页「预算管理」仅只读展示当前模式,切换入口统一在此。
|
||||||
|
</p>
|
||||||
|
<div style="margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
|
||||||
|
<el-radio-group v-model="budgetModeSel">
|
||||||
|
<el-radio-button value="fixed">固定预算</el-radio-button>
|
||||||
|
<el-radio-button value="rolling">滚动预算</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-button type="primary" :loading="savingBudget"
|
||||||
|
:disabled="!budgetModeSel || budgetModeSel === budgetModeCur" @click="saveBudgetMode">保存</el-button>
|
||||||
|
<span style="color:#909399;font-size:13px;">
|
||||||
|
当前:{{ budgetModeCur === 'rolling' ? '滚动预算(滚动12月)' : '固定预算(固定年度)' }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -142,7 +160,7 @@
|
|||||||
import { ref, onMounted, computed } from 'vue'
|
import { ref, onMounted, computed } from 'vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
// 统一走 api/index.ts 的 axios 实例(拦截器自动带 Bearer / 401 跳登录)
|
// 统一走 api/index.ts 的 axios 实例(拦截器自动带 Bearer / 401 跳登录)
|
||||||
import { permissionApi, alignmentApi } from '../api/index'
|
import { permissionApi, alignmentApi, budgetApi } from '../api/index'
|
||||||
|
|
||||||
// ── Tab 控制 ──
|
// ── Tab 控制 ──
|
||||||
const activeTab = ref('permissions')
|
const activeTab = ref('permissions')
|
||||||
@@ -290,6 +308,38 @@ async function saveAlignmentConfig() {
|
|||||||
savingAlign.value = false
|
savingAlign.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── 预算模式(系统级;业务页仅只读,切换入口统一在此) ──
|
||||||
|
const budgetModeCur = ref('fixed')
|
||||||
|
const budgetModeSel = ref('fixed')
|
||||||
|
const savingBudget = ref(false)
|
||||||
|
|
||||||
|
async function loadBudgetMode() {
|
||||||
|
try {
|
||||||
|
const r: any = await budgetApi.getConfig()
|
||||||
|
budgetModeCur.value = r.budget_mode || r.mode || 'fixed'
|
||||||
|
budgetModeSel.value = budgetModeCur.value
|
||||||
|
} catch { budgetModeCur.value = 'fixed'; budgetModeSel.value = 'fixed' }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveBudgetMode() {
|
||||||
|
if (!budgetModeSel.value || budgetModeSel.value === budgetModeCur.value) return
|
||||||
|
const label = budgetModeSel.value === 'rolling' ? '滚动预算' : '固定预算'
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm(
|
||||||
|
`预算模式为系统级设置,切换后将立即作用于全部账套。确认切换为「${label}」?`,
|
||||||
|
'系统级设置二次确认',
|
||||||
|
{ type: 'warning', confirmButtonText: '确认切换', cancelButtonText: '取消' }
|
||||||
|
)
|
||||||
|
} catch { return }
|
||||||
|
savingBudget.value = true
|
||||||
|
try {
|
||||||
|
await budgetApi.setConfig({ mode: budgetModeSel.value, rolling_months: 12 })
|
||||||
|
ElMessage.success('预算模式已设置')
|
||||||
|
await loadBudgetMode()
|
||||||
|
} catch { ElMessage.error('设置失败') }
|
||||||
|
savingBudget.value = false
|
||||||
|
}
|
||||||
|
|
||||||
async function previewTree() {
|
async function previewTree() {
|
||||||
loadingTree.value = true
|
loadingTree.value = true
|
||||||
try {
|
try {
|
||||||
@@ -304,6 +354,7 @@ async function previewTree() {
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadPermData()
|
loadPermData()
|
||||||
loadAlignmentConfig()
|
loadAlignmentConfig()
|
||||||
|
loadBudgetMode()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user