Skip to content

D
dsk-operate-sys-cscec
Commit a9f0d3ed authored by tianhongyang's avatar tianhongyang
Browse files
Options

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

parent 73a0c9d3
Show whitespace changes
Inline Side-by-side
Showing with 117 additions and 130 deletions
dsk-operate-ui/src/utils/index.js
View file @ a9f0d3ed
......@@ -1039,7 +1039,7 @@ 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]; // 找到目标节点，将其添加到祖先数组中并返回
}
......
dsk-operate-ui/src/views/projectCostLedger/detail/components/FeedSummary/index.vue
View file @ a9f0d3ed
......@@ -16,7 +16,7 @@ export default {
},
data() {
return {
menuTreeList: []
};
},
//可访问data属性
......
dsk-operate-ui/src/views/projectCostLedger/detail/components/ProjectBreadCrumb.vue
View file @ a9f0d3ed
<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;
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
View file @ a9f0d3ed
<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 0 → 100644
View file @ a9f0d3ed
<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
View file @ a9f0d3ed
<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
View file @ a9f0d3ed
<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: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment