🦄 refactor(重构项目成本台账面包屑组件，外部按规范入参 内部动态处理):

dsk-operate-ui/src/utils/index.js

@@ -1039,11 +1039,11 @@ export function generateRandomLowerCaseLetter() {
  * @param {Array<any>} ancestors 
  * @returns 
  */
-export function findAncestors(data, targetId, idKey = "uid", childrenKey = "children", ancestors = []) {
+export function findAncestors(data, targetId, idKey = "id", childrenKey = "children", ancestors = []) {
   if (data[idKey] === targetId) {
     return [...ancestors, data]; // 找到目标节点，将其添加到祖先数组中并返回
   }
-
+  
   if (data[childrenKey]?.length) {
     for (const child of data[childrenKey]) {
       const result = findAncestors(child, targetId, idKey, childrenKey, [...ancestors, data]); // 递归调用，将当前节点添加到祖先数组中

dsk-operate-ui/src/views/projectCostLedger/detail/components/FeedSummary/index.vue

@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-
+      menuTreeList: []
     };
   },
   //可访问data属性

dsk-operate-ui/src/views/projectCostLedger/detail/components/ProjectBreadCrumb.vue

 <template>
   <div class="project-bread-crumb-container">
     <el-breadcrumb separator-class="el-icon-arrow-right" class="project-bread-crumb-inner">
-      <!-- 默认展示 -->
-      <el-breadcrumb-item class="project-bread-crumb-item">
-        <span @click="$router.push('/projectCostLedger')">项目成本台账</span>
-      </el-breadcrumb-item>
-      <!-- 当前模块 -->
-      <transition name="breadcrumb" mode="out-in">
-        <el-breadcrumb-item class="project-bread-crumb-item current-bread-brumb-item" v-if="breadCrumb[module] && current">
-          <span>{{breadCrumb[module].breadcrumbName}}</span>
-        </el-breadcrumb-item>
-      </transition>
-      <!-- 下级 -->
       <transition-group name="breadcrumb" tag="div" v-if="currentBreadCurmbList.length">
         <el-breadcrumb-item class="project-bread-crumb-item" v-for="(item,index) of currentBreadCurmbList" :key="item.path"
-          :class="{'current-bread-brumb-item' : item.path == current}">
-          <span @click.stop="item.path == current ? '' : breadClickHandle(item)">{{item.breadcrumbName}}</span>
+          :class="{'current-bread-brumb-item' : useTrigger(item)}">
+          <slot :name="item.path" :data="item">
+            <span @click.stop="useTrigger(item) ? '' : breadClickHandle(item)">{{item.breadcrumbName}}</span>
+          </slot>
         </el-breadcrumb-item>
       </transition-group>
     </el-breadcrumb>
@@ -28,59 +19,30 @@ export default {
   name: "projectBreadCrumb",
   props: {
     current: String,
-    module: String
+    indexText: String,
+    breadCrumbTree: {
+      type: Array,
+      default: () => []
+    }
   },
   watch: {
     current: {
       handler(newValue, oldValue) {
         this.init(newValue);
       }
+    },
+    breadCrumbTree: {
+      handler(newValue) {
+        this.comBreadCrumbTree = newValue;
+        this.init(this.current);
+      },
+      deep: true
     }
   },
   data() {
     return {
       currentBreadCurmbList: [],
-      breadCrumb: {
-        // 详情
-        detail: {
-          breadcrumbName: "详情",
-          childrenBreadCrumb: [
-            {
-              breadcrumbName: "工程项目信息",
-              path: "basicEngineeringInformation"
-            },
-            {
-              breadcrumbName: "直接费成本",
-              path: "directCost"
-            },
-            {
-              breadcrumbName: "工料汇总",
-              path: "feedSummary"
-            },
-            {
-              breadcrumbName: "措施项目",
-              path: "measureItem"
-            },
-            {
-              breadcrumbName: "其他项目",
-              path: "otherItems"
-            },
-            {
-              breadcrumbName: "现场经费",
-              path: "fieldExpenses"
-            },
-            {
-              breadcrumbName: "成本汇总",
-              path: "cost"
-            },
-            {
-              breadcrumbName: "盈亏分析对比",
-              path: "profitAndLoss"
-            }
-          ]
-        }
-        // 缺省配置
-      }
+      comBreadCrumbTree: this.breadCrumbTree
     };
   },
   //可访问data属性
@@ -95,28 +57,33 @@ export default {
   methods: {
     init(current) {
       if (!current) return;
-      // 取出当前模块
-      const _temp = cloneDeep(this.breadCrumb[this.module]);
-      if (!_temp) return;
-      this.currentBreadCurmbList = this.createBreadCrumb(current, _temp);
+      if (this?.comBreadCrumbTree?.length) {
+        const _temp = cloneDeep(this.comBreadCrumbTree);
+        // 根节点path 为root
+        _temp[0].path = "root";
+        this.currentBreadCurmbList = this.createBreadCrumb(current, _temp);
+      }
     },
     createBreadCrumb(current, data) {
-      let result = findAncestors(data, current, "path", "childrenBreadCrumb");
+      let result = findAncestors(data[0], current, "path", "childrenBreadCrumb");
       if (result) {
-        result = result.filter(item => item.path);
         result = result.map(item => {
           const _temp = {
             breadcrumbName: item.breadcrumbName,
+            triggerHandle: item.triggerHandle === false ? false : true
           };
           if (item.path) _temp["path"] = item.path;
           return _temp;
         });
         return result;
       }
-      ;
+      return [];
+    },
+    useTrigger(item) {
+      return item.path == this.current || item.triggerHandle === false;
     },
     breadClickHandle(item) {
-      console.log(item);
+      this.$emit("breadCrumbTrigger", item);
     }
   },
 }

dsk-operate-ui/src/views/projectCostLedger/detail/components/ProjectDetailHeader.vue

 <template>
   <div class="project-cost-ledger-detail-header">
     <div class="project-cost-ledger-detail-header-inner">
-      <project-bread-crumb :module="module" :current="current"></project-bread-crumb>
+      <project-bread-crumb :current="current" :breadCrumbTree="breadCrumbTree" @breadCrumbTrigger="breadCrumbTrigger"></project-bread-crumb>
       <!-- 项目名称 -->
       <div class="project-detail-header-name">宝安中学（集团）初中部改扩建工程施工总承包（二次公告）</div>
       <!-- 项目信息 -->
@@ -27,15 +27,15 @@ import ProjectBreadCrumb from "@/views/projectCostLedger/detail/components/Proje
 export default {
   name: "projectDetailHeader",
   props: {
-    module: String,
-    current: String
+    current: String,
+    breadCrumbTree: Array
   },
   components: {
     ProjectBreadCrumb
   },
   data() {
     return {
-      isShowProjectCode: ["basicEngineeringInformation", "directCost", "feedSummary", "cost"]
+      isShowProjectCode: ["basicEngineeringInformation", "directCost", "feedSummary", "cost"],
     };
   },
   //可访问data属性
@@ -48,7 +48,12 @@ export default {
   },
   //方法集
   methods: {
-
+    breadCrumbTrigger(item) {
+      console.log(item);
+      if (item.path == "root") {
+        this.$router.push("/projectCostLedger");
+      }
+    }
   },
 }
 </script>

dsk-operate-ui/src/views/projectCostLedger/detail/components/ProjectSideMenu/ProjectMenuItem.vue

+<template>
+    <div class="project-menu-item-container">
+
+    </div>
+</template>
+<script>
+export default {
+   name : "projectMenuItem",
+   data() {
+      return {
+
+      }
+   },
+   //可访问data属性
+   created(){
+
+   },
+   //计算集
+   computed:{
+
+   },
+   //方法集
+   methods:{
+
+   },
+}
+</script>
+<style lang="scss" scoped>
+.project-menu-item-container {
+  
+}
+</style>

dsk-operate-ui/src/views/projectCostLedger/detail/components/ProjectSideMenu/index.vue

 <template>
   <div class="project-side-menu-container">
     <el-menu mode="vertical" class="project-side-menu-instance">
-      <el-submenu index="1">
-        <template slot="title">
-          <i class="el-icon-location"></i>
-          <span>导航一</span>
-        </template>
-        <el-menu-item-group>
-          <template slot="title">分组一</template>
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="分组2">
-          <el-menu-item index="1-3">选项3</el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-menu-item index="2">
-        <i class="el-icon-menu"></i>
-        <span slot="title">导航二</span>
-      </el-menu-item>
-      <el-menu-item index="3" disabled>
-        <i class="el-icon-document"></i>
-        <span slot="title">导航三</span>
-      </el-menu-item>
-      <el-menu-item index="4">
-        <i class="el-icon-setting"></i>
-        <span slot="title">导航四</span>
-      </el-menu-item>
-      <el-menu-item index="5">
-        <i class="el-icon-setting"></i>
-        <span slot="title">导航四</span>
-      </el-menu-item>
-      <el-menu-item index="6">
-        <i class="el-icon-setting"></i>
-        <span slot="title">导航四</span>
-      </el-menu-item>
-      <el-menu-item index="7">
-        <i class="el-icon-setting"></i>
-        <span slot="title">导航四</span>
-      </el-menu-item>
-      <el-menu-item index="8">
-        <i class="el-icon-setting"></i>
-        <span slot="title">导航四</span>
-      </el-menu-item>
-      <el-menu-item index="9">
-        <i class="el-icon-setting"></i>
-        <span slot="title">导航四</span>
-      </el-menu-item>
-      <el-menu-item index="10">
-        <i class="el-icon-setting"></i>
-        <span slot="title">导航四</span>
-      </el-menu-item>
+      <project-menu-item></project-menu-item>
     </el-menu>
   </div>
 </template>
 <script>
+import ProjectMenuItem from "@/views/projectCostLedger/detail/components/ProjectSideMenu/ProjectMenuItem";
 export default {
   name: "projectSideMenu",
+  components: {
+    ProjectMenuItem
+  },
+  props: {
+    // 菜单树形结构对象
+    menuTree: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
   data() {
     return {
 
@@ -72,7 +31,9 @@ export default {
   },
   //计算集
   computed: {
-
+    allDisabled() {
+      return (!this.menuTree || !Object.keys(this.menuTree)?.length) ? true : false;
+    }
   },
   //方法集
   methods: {
@@ -93,7 +54,7 @@ export default {
     overflow: auto;
 
     /* 重置一级二级菜单 高度行高 */
-    .el-submenu__title {
+    /* .el-submenu__title {
       height: 32px;
       line-height: 32px;
 
@@ -105,7 +66,7 @@ export default {
           rgba(0, 129, 255, 0) 100%
         );
       }
-    }
+    } */
   }
 }
 </style>

dsk-operate-ui/src/views/projectCostLedger/detail/index.vue

 <template>
   <div class="project-cost-ledger-detail">
     <div class="project-cost-ledger-detail-inner">
-      <project-detail-header :module="module" :current="current"></project-detail-header>
+      <project-detail-header :current="current" :breadCrumbTree="createProjectBreadCrumbTree"></project-detail-header>
       <!-- tab切换栏 -->
       <dsk-tab-toggle v-model="current" :tabs="toggleTabs" @tabToggle="tabToggle"></dsk-tab-toggle>
       <!-- tab切换组件容器 -->
@@ -31,6 +31,7 @@ import DirectCost from "@/views/projectCostLedger/detail/components/DirectCost";
 // 工料汇总
 import FeedSummary from "@/views/projectCostLedger/detail/components/FeedSummary";
 import { v4 } from "uuid";
+import { cloneDeep } from "lodash-es";
 export default {
   name: "projectCostLedgerDetail",
   components: {
@@ -44,7 +45,6 @@ export default {
     return {
       projectID: "",
       current: "",
-      module: "detail",
       // 详情信息变量
       detailInfo: {},
       toggleTabs: [
@@ -101,7 +101,29 @@ export default {
   },
   //计算集
   computed: {
+    createProjectBreadCrumbTree() {
+      try {
+        const _tempArray = cloneDeep(this.toggleTabs.map(item => {
+          item.path = item.value;
+          item.breadcrumbName = item.name;
+          return item;
+        }));
+        // 创建树形结构信息
+        const _temp = {
+          breadcrumbName: "项目成本台账",
+          childrenBreadCrumb: [{
+            breadcrumbName: "详情",
+            path: "detail",
+            triggerHandle: false,
+            childrenBreadCrumb: _tempArray
+          }],
 
+        };
+        return [_temp];
+      } catch (error) {
+        console.log(error);
+      }
+    }
   },
   //方法集
   methods: {