feat: 需求类型改为树形结构展示

frontend/src/views/Settings.vue

@@ -113,10 +113,12 @@
 
               <a-table
                 :columns="demandTypeColumns"
-                :data-source="demandTypes"
+                :data-source="demandTypesTree"
                 :loading="loading.demandTypes"
                 row-key="id"
-                :pagination="{ pageSize: 20 }"
+                :pagination="false"
+                :default-expand-all-rows="true"
+                :indent-size="24"
               >
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'level'">
@@ -124,15 +126,8 @@
                     <a-tag v-else-if="getDemandTypeLevel(record) === 2" color="green">二级</a-tag>
                     <a-tag v-else color="orange">三级</a-tag>
                   </template>
-                  <template v-else-if="column.key === 'parentName'">
-                    <span v-if="record.parentId">{{ record.parentName || '--' }}</span>
-                    <span v-else class="text-muted">--</span>
-                  </template>
                   <template v-else-if="column.key === 'name'">
-                    <span :style="{ paddingLeft: (getDemandTypeLevel(record) - 1) * 20 + 'px' }">
-                      <span v-if="getDemandTypeLevel(record) > 1">└ </span>
-                      {{ record.name || '--' }}
-                    </span>
+                    <span class="tree-name">{{ record.name || '--' }}</span>
                   </template>
                   <template v-else-if="column.key === 'unitScore'">
                     <!-- 三级分类显示单价，或者有单价值的也显示（兼容旧数据） -->
@@ -2155,6 +2150,38 @@ const level3DemandTypes = computed(() => {
 // 兼容旧代码
 const parentDemandTypes = level2DemandTypes
 
+// 构建树形结构数据
+const demandTypesTree = computed(() => {
+  // 获取所有一级分类
+  const level1 = demandTypes.value.filter(dt => !dt.parentId)
+  
+  // 为每个一级分类添加子节点
+  return level1.map(l1 => {
+    // 获取该一级分类下的二级分类
+    const level2Children = demandTypes.value.filter(dt => dt.parentId === l1.id)
+    
+    // 为每个二级分类添加三级子节点
+    const l1WithChildren = {
+      ...l1,
+      children: level2Children.map(l2 => {
+        // 获取该二级分类下的三级分类
+        const level3Children = demandTypes.value.filter(dt => dt.parentId === l2.id)
+        return {
+          ...l2,
+          children: level3Children.length > 0 ? level3Children : undefined
+        }
+      })
+    }
+    
+    // 如果没有子节点，不设置children属性
+    if (l1WithChildren.children.length === 0) {
+      delete l1WithChildren.children
+    }
+    
+    return l1WithChildren
+  })
+})
+
 // 获取需求类型的层级
 const getDemandTypeLevel = (record: DemandType): number => {
   if (!record.parentId) return 1
@@ -2292,16 +2319,14 @@ const getLimitPeriodLabel = (value?: string) => {
 
 // 表格列定义
 const demandTypeColumns = [
-  { title: 'ID', dataIndex: 'id', key: 'id', width: 60 },
+  { title: '类型名称', dataIndex: 'name', key: 'name', width: 280 },
   { title: '级别', key: 'level', width: 70 },
-  { title: '上级', key: 'parentName', width: 100 },
-  { title: '类型名称', dataIndex: 'name', key: 'name' },
   { title: '单价分值', dataIndex: 'unitScore', key: 'unitScore', width: 100 },
   { title: '预计时长(h)', dataIndex: 'estimatedHours', key: 'estimatedHours', width: 100 },
   { title: '可接单部门', key: 'allowedDepts', ellipsis: true },
   { title: '排序', dataIndex: 'sortOrder', key: 'sortOrder', width: 60 },
   { title: '状态', key: 'status', width: 70 },
-  { title: '操作', key: 'actions', width: 220 }
+  { title: '操作', key: 'actions', width: 200 }
 ]
 
 const taskSubTypeColumns = [