KPI通用化: bsc_layer_config表+API+企业选择器+企业CRUD

frontend/src/api/index.ts

@@ -220,6 +220,12 @@ export const biReportApi = {
   exportReport: (data: any) => api.post('/bi-reports/export', data),
 }
 
+export const entityApi = {
+  list: () => api.get('/entities'),
+  create: (data: any) => api.post('/entities', data),
+  update: (id: number, data: any) => api.put(`/entities/${id}`, data),
+}
+
 export const ethicsQuizApi = {
   getQuestions: () => api.get('/knowledge/ethics-quiz'),
 }

frontend/src/views/KPIList.vue

@@ -35,6 +35,20 @@
 
       <!-- 右侧：搜索+表格 -->
       <div class="right-content">
+        <!-- 企业选择器 -->
+        <div class="entity-selector">
+          <span class="entity-label">🌐 企业：</span>
+          <el-select v-model="currentEntityId" @change="onEntityChange" style="width:200px">
+            <el-option
+              v-for="e in entities"
+              :key="e.id"
+              :label="e.short_name + ' / ' + e.name"
+              :value="e.id"
+            />
+          </el-select>
+          <span class="entity-name-hint">{{ currentEntityName }}</span>
+        </div>
+
         <!-- 搜索栏 -->
         <div class="search-bar">
           <el-input v-model="searchKeyword" placeholder="搜索KPI名称/编码" clearable style="width:220px" @clear="loadKpis" @keyup.enter="loadKpis" />
@@ -337,7 +351,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { kpiApi, templateApi, dashboardApi } from '../api/index'
+import { kpiApi, templateApi, dashboardApi, entityApi } from '../api/index'
 import MyDialog from '../components/MyDialog.vue'
 
 // ── 数据 ──
@@ -352,6 +366,11 @@ const searchKeyword = ref('')
 const searchDimension = ref('')
 const searchCategory = ref('')
 
+// ── 企业选择 ──
+const entities = ref<any[]>([])
+const currentEntityId = ref(1)
+const currentEntityName = ref('酣客')
+
 // ── 分类树 ──
 const categoryTree = ref<any[]>([])
 const defaultExpanded = ref<string[]>([])
@@ -457,7 +476,7 @@ function onTreeCheck(data: any, { checkedKeys }: any) {
 async function loadKpis() {
   loading.value = true
   try {
-    const params: any = { page: page.value, page_size: pageSize }
+    const params: any = { page: page.value, page_size: pageSize, entity_id: currentEntityId.value }
     if (searchKeyword.value) params.keyword = searchKeyword.value
     if (searchDimension.value) params.dimension = searchDimension.value
     if (searchCategory.value) params.category = searchCategory.value
@@ -622,7 +641,29 @@ async function doInstantiate() {
   }
 }
 
+// ── 企业选择 ──
+async function loadEntities() {
+  try {
+    const r: any = await entityApi.list()
+    entities.value = r.data || []
+    // Find current entity name
+    const cur = entities.value.find((e: any) => e.id === currentEntityId.value)
+    if (cur) currentEntityName.value = cur.short_name || cur.name
+  } catch (e) {
+    console.error('加载企业列表失败', e)
+  }
+}
+
+function onEntityChange(val: number) {
+  const cur = entities.value.find((e: any) => e.id === val)
+  currentEntityName.value = cur ? (cur.short_name || cur.name) : ''
+  page.value = 1
+  loadKpis()
+  loadCategories()
+}
+
 onMounted(() => {
+  loadEntities()
   loadCategories()
   loadKpis()
 })
@@ -693,6 +734,25 @@ onMounted(() => {
   flex-direction: column;
   overflow: hidden;
 }
+.entity-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background: #f0f9ff;
+  border-radius: 4px;
+  border: 1px solid #d0e8ff;
+}
+.entity-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+.entity-name-hint {
+  font-size: 13px;
+  color: #909399;
+}
 .search-bar {
   display: flex;
   gap: 8px;