ソースを参照

feat(project): 列表序号改为层级化编号(子项目带父序号,如 1.1/1.2)

- loadList 加载树后递归 assignSeq 计算每个节点 seq
- 顶层项目 1/2/3..., 其子项目自动带父序号 -> 1.1/1.2/2.1
- 序号列由原来 $index+1 改为展示 row.seq, 宽度调整到 72
C 2 ヶ月 前
親
コミット
75a4a78303
1 ファイル変更、14 行追加、2 行削除
  1. 14 2
      frontend/src/views/project/ProjectList.vue

+ 14 - 2
frontend/src/views/project/ProjectList.vue

@@ -36,8 +36,8 @@
       </el-form>
 
       <el-table :data="treeData" v-loading="loading" row-key="id" :tree-props="{ children: 'children' }" default-expand-all>
-        <el-table-column label="序号" width="60" header-align="right" align="right">
-          <template #default="{ $index }">{{ $index + 1 }}</template>
+        <el-table-column label="序号" width="72" header-align="right" align="right">
+          <template #default="{ row }">{{ row.seq }}</template>
         </el-table-column>
         <el-table-column label="项目名称" min-width="200">
           <template #default="{ row }">
@@ -142,12 +142,24 @@ async function loadList() {
   loading.value = true
   try {
     const res = await projectTreeApi(query)
+    // 层级化序号: 顶层 1/2/3..., 子项目带父序号 1.1/1.2/2.1...
+    assignSeq(res.data, '')
     treeData.value = res.data
   } finally {
     loading.value = false
   }
 }
 
+function assignSeq(list, prefix) {
+  if (!Array.isArray(list)) return
+  list.forEach((node, i) => {
+    node.seq = prefix ? `${prefix}.${i + 1}` : `${i + 1}`
+    if (node.children && node.children.length) {
+      assignSeq(node.children, node.seq)
+    }
+  })
+}
+
 function handleSearch() { loadList() }
 function handleReset() { Object.assign(query, { name: '', status: null }); loadList() }