第二阶段代码

apps/web-ele/src/views/database/interface/unit.vue

@@ -1,77 +1,65 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch,computed, readonly } from 'vue'
-import { Page } from '@vben/common-ui';
-import { ElSplitter,ElSplitterPanel,ElCard,ElTabs,ElTabPane } from 'element-plus';
-import { useElementSize } from '@vueuse/core'
+import { getQuotaCatalogItemTree } from '#/api/database/quota/index';
 import { DbTree } from '#/components/db-tree';
-import { DbHst } from '#/components/db-hst';
-
-import { handleRowOperation, codeRenderer } from '#/components/db-hst/tree'
-// import { sourceDataObject } from '#/components/db-hst/mockData'
+import { Page } from '@vben/common-ui';
+import { ElCard, ElSplitter, ElSplitterPanel } from 'element-plus';
+import { onMounted, onUnmounted, ref } from 'vue';
 
 // 导入子组件
-import FieldName from './unit/FieldName.vue'
-import SubItem from './unit/SubItem.vue'
-import MeasureItem from './unit/MeasureItem.vue'
-import OtherItem from './unit/OtherItem.vue'
-import UnitSummary from './unit/UnitSummary.vue'
-import VariableSettings from './unit/VariableSettings.vue'
-import MaterialField from './unit/MaterialField.vue'
-const containerRef = ref<HTMLElement | null>(null)
-const { height: containerHeight } = useElementSize(containerRef)
-// const topContainerRef = ref<HTMLElement | null>(null)
-// const { height: topContainerHeight } = useElementSize(topContainerRef)
-// const bottomContainerRef = ref<HTMLElement | null>(null)
-// const { height: bottomContainerHeight } = useElementSize(bottomContainerRef)
-// const bottomPanelHeight = ref<number>(0)
-type Tree = { id: string; label: string; children?: Tree[] }
-const categoryTreeData = ref<Tree[]>([
-  {
-    id: '1',
-    label: '行业总类',
-    children: [
-      {
-        id: '2',
-        label: '广东',
-        children: [
-          { id: '3', label: '行业1' },
-          { id: '4', label: '行业2' },
-          { id: '5', label: '行业3' }
-        ]
-      }
-    ]
-  },
-  {
-    id: '11',
-    label: '行业2',
-    children: [
-      {
-        id: '12',
-        label: '广西',
-        children: [
-          { id: '13', label: '行业5' },
-          { id: '14', label: '行业6' },
-          { id: '15', label: '行业7' }
-        ]
-      }
-    ]
+import VariableSettings from './unit/VariableSettings.vue';
+
+type Tree = { id: string; label: string; children?: Tree[];[key: string]: any }
+const treeData = ref<Tree[]>([])
+const selectedNode = ref<any>(null)
+
+// 转换后端数据为树形结构（后端已通过 exclude: 'rate_mode' 过滤掉费率模式节点）
+const transformTreeData = (data: any[]): Tree[] => {
+  if (!data || !Array.isArray(data)) {
+    console.warn('transformTreeData: 数据不是数组', data)
+    return []
   }
-])
-// const colHeaders = ref<string[]>(topColHeaders)
-const activeTab = ref('fieldName')
-const categoryHandleSelect = (node: Tree) => {
-  console.log('categoryhandleSelect',node)
+
+  return data.map(item => {
+    const treeNode: Tree = {
+      ...item,
+      id: String(item.id),
+      label: item.name || item.label || '未命名',
+    }
+
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      treeNode.children = transformTreeData(item.children)
+    }
+
+    return treeNode
+  })
 }
 
-const detailHandleSelect = (node: Tree) => {
-  // if (topHstRef.value && typeof topHstRef.value.loadData === 'function') {
-  //   // console.log('hstData.value',hstData.value)
-  //   // topHstRef.value.loadData(topHstData.value)
-  // }
+// 加载定额专业树（排除 rate_mode 节点，与定额基价页面一致）
+const loadCategoryTree = async () => {
+  try {
+    const res = await getQuotaCatalogItemTree({ exclude: 'rate_mode,majors,fields_majors' })
+    console.log('定额专业树原始数据:', res)
+    treeData.value = transformTreeData(res)
+    console.log('定额专业树转换后数据:', treeData.value)
+  } catch (error) {
+    console.error('加载定额专业树失败:', error)
+  }
 }
 
+// 处理树节点点击（只有 specialty 节点才显示变量设置）
+const handleNodeClick = (payload: { node: any, data: any, event: MouseEvent }) => {
+  const { node, data } = payload
+  console.log('节点点击:', node, data)
+  // 只有定额专业节点才显示变量设置
+  if (data.nodeType === 'specialty') {
+    selectedNode.value = data
+  } else {
+    selectedNode.value = null
+  }
+}
 
 onMounted(() => {
+  loadCategoryTree()
 })
 onUnmounted(() => {
 })
@@ -80,50 +68,29 @@ onUnmounted(() => {
 
 <template>
 <Page auto-content-height>
-   <!-- <DbHst ref="bottomHstRef" :settings="bottomDbSettings"></DbHst> -->
-   <ElSplitter >
-      <ElSplitterPanel collapsible size="15%" :min="200">
-        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
-            <DbTree :height="containerHeight" :data="categoryTreeData" @select="categoryHandleSelect" :defaultExpandedKeys="2"  :search="false" />
+   <ElSplitter>
+      <ElSplitterPanel size="15%" :min="200">
+        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full w-full flex flex-col">
+            <DbTree
+              ref="treeRef"
+              :tree-data="treeData"
+              :draggable="false"
+              :default-expanded-level="3"
+              @node-click="handleNodeClick"
+            />
         </ElCard>
       </ElSplitterPanel>
-      <ElSplitterPanel collapsible :min="200">
-        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full">
-           <ElTabs v-model="activeTab" type="border-card" class="h-full">
-              <ElTabPane label="字段名称" name="fieldName" lazy>
-                <FieldName :height="containerHeight"/>
-              </ElTabPane>
-              <ElTabPane label="分部分项" name="subItem" lazy>
-                <!-- <SubItem /> -->
-                 <FieldName :height="containerHeight"/>
-              </ElTabPane>
-              <ElTabPane label="措施项目" name="measureItem" lazy>
-                <!-- <MeasureItem /> -->
-                 <FieldName :height="containerHeight"/>
-              </ElTabPane>
-              <ElTabPane label="其他项目" name="otherItem" lazy>
-                <!-- <OtherItem /> -->
-                 <FieldName :height="containerHeight"/>
-              </ElTabPane>
-              <ElTabPane label="单位汇总" name="unitSummary" lazy>
-                <!-- <UnitSummary /> -->
-                 <FieldName :height="containerHeight"/>
-              </ElTabPane>
-              <ElTabPane label="变量设置" name="variableSettings" lazy>
-                <VariableSettings />
-              </ElTabPane>
-              <ElTabPane label="工料机字段" name="materialField" lazy>
-                <MaterialField />
-              </ElTabPane>
-            </ElTabs>
+      <ElSplitterPanel :min="200">
+        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full w-full">
+          <VariableSettings  :selectedNode="selectedNode"/>
         </ElCard>
       </ElSplitterPanel>
     </ElSplitter>
 </Page>
 </template>
 
-<style lang="css">
+<style lang="scss">
 .el-tabs--border-card>.el-tabs__content  {
-  padding: 5px 0;
+  padding: 0 !important;
 }
 </style>