|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<ContentContainer class="customer-wrapper" id="box"> |
|
|
|
<ContentContainer id="box" class="customer-wrapper"> |
|
|
|
<!-- 上面模块 --> |
|
|
|
<div class="customer-top-wrap clearfix" :style="{height:topWrapHeight}" id="top"> |
|
|
|
<div id="top" :style="{height:topWrapHeight}" class="customer-top-wrap clearfix"> |
|
|
|
<!-- 左侧客户树 --> |
|
|
|
<!-- <div class="customer-top-left-wrap fl"> |
|
|
|
<div class="customer-tree-wrapper"> |
|
|
@ -29,7 +29,7 @@ |
|
|
|
</div> |
|
|
|
<!-- 下面模块 --> |
|
|
|
<DragBar /> |
|
|
|
<div class="customer-bottom-wrap clearfix" :style="{height:bottomWrapHeight}" id="bottom"> |
|
|
|
<div id="bottom" :style="{height:bottomWrapHeight}" class="customer-bottom-wrap clearfix"> |
|
|
|
|
|
|
|
<!-- 左侧 资源树 --> |
|
|
|
<div class="customer-bottom-left-wrap fl"> |
|
|
@ -37,11 +37,11 @@ |
|
|
|
<div class="resource-tree-wrapper-tree"> |
|
|
|
<!-- 资源树 --> |
|
|
|
<el-tree |
|
|
|
class="resource-filter-tree" |
|
|
|
:props="defaultProps" |
|
|
|
:data="resourceTreeData" |
|
|
|
ref="resourceTree" |
|
|
|
v-loading="resourceTreeLoading" |
|
|
|
:data="resourceTreeData" |
|
|
|
:props="defaultProps" |
|
|
|
class="resource-filter-tree" |
|
|
|
@node-click="resourceNodeClick" |
|
|
|
> |
|
|
|
</el-tree> |
|
|
@ -50,7 +50,7 @@ |
|
|
|
</div> |
|
|
|
<!-- 右侧 资源负荷、资源产能评估 --> |
|
|
|
<div class="customer-bottom-right-wrap"> |
|
|
|
<ResourceContent /> |
|
|
|
<ResourceContent /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ContentContainer> |
|
|
@ -61,16 +61,20 @@ import axios from "axios"; |
|
|
|
import DemandPlanning from "./demandPlanning"; |
|
|
|
// 资源内容 |
|
|
|
import ResourceContent from "./resourceContent"; |
|
|
|
import { mapMutations,mapState } from 'vuex' |
|
|
|
import { mapMutations, mapState } from "vuex"; |
|
|
|
// api |
|
|
|
import { getMainResourceList, getSecondaryResourceList, customertree } from "@/server/productionPlanning/customerForecastDemandReview"; |
|
|
|
|
|
|
|
import { |
|
|
|
customertree, |
|
|
|
getMainResourceList, |
|
|
|
getSecondaryResourceList |
|
|
|
} from "@/server/productionPlanning/customerForecastDemandReview"; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
// 需求计划 |
|
|
|
DemandPlanning, |
|
|
|
// 资源内容 |
|
|
|
ResourceContent, |
|
|
|
ResourceContent |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
@ -86,13 +90,13 @@ export default { |
|
|
|
defaultProps: { |
|
|
|
children: "Children", |
|
|
|
label: "Label", |
|
|
|
isLeaf: "Leaf", |
|
|
|
isLeaf: "Leaf" |
|
|
|
}, |
|
|
|
// 筛选客户 |
|
|
|
filterCustomer: "", |
|
|
|
topWrapHeight:"calc(50% - 15px)", |
|
|
|
bottomWrapHeight:"calc(50% - 5px)", |
|
|
|
showBottomWrap:true |
|
|
|
topWrapHeight: "calc(50% - 15px)", |
|
|
|
bottomWrapHeight: "calc(50% - 5px)", |
|
|
|
showBottomWrap: true |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
@ -101,41 +105,41 @@ export default { |
|
|
|
// 获取资源Tree数据 |
|
|
|
this.getResourceTreeData(); |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
this.dragChangeSize((moveLen)=>{ |
|
|
|
this.SET_articleDemandHeight((moveLen - 145) + "px") |
|
|
|
mounted() { |
|
|
|
this.dragChangeSize((moveLen) => { |
|
|
|
this.SET_articleDemandHeight((moveLen - 145) + "px"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
'$route' (to, from) { |
|
|
|
this.INIT_all() |
|
|
|
}, |
|
|
|
$route() { |
|
|
|
this.INIT_all(); |
|
|
|
}, |
|
|
|
// 筛选数据 |
|
|
|
filterCustomer(val) { |
|
|
|
this.$refs.customerTree.filter(val); |
|
|
|
}, |
|
|
|
isSelectResource(val) { |
|
|
|
this.changeTreeNodeStatus(this.$refs.resourceTree.store.root,val); |
|
|
|
this.changeTreeNodeStatus(this.$refs.resourceTree.store.root, val); |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState("customerForecastDemandReview",[ |
|
|
|
'resourceId', |
|
|
|
'resourceType', |
|
|
|
'isSelectResource' |
|
|
|
]) |
|
|
|
computed: { |
|
|
|
...mapState("customerForecastDemandReview", [ |
|
|
|
"resourceId", |
|
|
|
"resourceType", |
|
|
|
"isSelectResource" |
|
|
|
]) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
...mapMutations("customerForecastDemandReview",['SET_customerId', |
|
|
|
'SET_artId', |
|
|
|
'SET_resourceId', |
|
|
|
'SET_resourceType', |
|
|
|
'SET_articleDemandHeight', |
|
|
|
'SET_articleCharHeight', |
|
|
|
'RESET_articleChar', |
|
|
|
'INIT_all' |
|
|
|
]), |
|
|
|
// |
|
|
|
...mapMutations("customerForecastDemandReview", ["SET_customerId", |
|
|
|
"SET_artId", |
|
|
|
"SET_resourceId", |
|
|
|
"SET_resourceType", |
|
|
|
"SET_articleDemandHeight", |
|
|
|
"SET_articleCharHeight", |
|
|
|
"RESET_articleChar", |
|
|
|
"INIT_all" |
|
|
|
]), |
|
|
|
// |
|
|
|
// toggleBottom(){ |
|
|
|
// if(this.showBottomWrap = !this.showBottomWrap) { |
|
|
|
// this.topWrapHeight = "calc(50% - 15px)", |
|
|
@ -154,45 +158,45 @@ export default { |
|
|
|
customertree().then(({ data = [] }) => { |
|
|
|
this.customerTreeLoading = false; |
|
|
|
this.customerTreeData = data; |
|
|
|
}).catch( () => { |
|
|
|
}).catch(() => { |
|
|
|
this.customerTreeLoading = false; |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 点击树状图节点触发的事件 |
|
|
|
// 点击树状图节点触发的事件 |
|
|
|
customerNodeClick(data) { |
|
|
|
if (data.Leaf === true) { |
|
|
|
// 点击的是最低级别的子节点 |
|
|
|
this.SET_customerId(data.CustomerId) |
|
|
|
this.SET_customerId(data.CustomerId); |
|
|
|
} |
|
|
|
}, |
|
|
|
//改变节点的状态 |
|
|
|
changeTreeNodeStatus(node,treeStatus) { |
|
|
|
changeTreeNodeStatus(node, treeStatus) { |
|
|
|
// 设置节点状态 |
|
|
|
node.expanded = treeStatus; |
|
|
|
for(let i = 0; i < node.childNodes.length; i++ ) { |
|
|
|
//改变节点的自身expanded状态 |
|
|
|
for (let i = 0; i < node.childNodes.length; i++) { |
|
|
|
//改变节点的自身expanded状态 |
|
|
|
node.childNodes[i].expanded = treeStatus; |
|
|
|
//看看他孩子的长度,有的话就调用自己往下找 |
|
|
|
if(node.childNodes[i].childNodes.length > 0) { |
|
|
|
//看看他孩子的长度,有的话就调用自己往下找 |
|
|
|
if (node.childNodes[i].childNodes.length > 0) { |
|
|
|
this.changeTreeNodeStatus(node.childNodes[i]); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 初始化资源树数据 |
|
|
|
initResourceTreeData(){ |
|
|
|
initResourceTreeData() { |
|
|
|
// 设置资源树数据 |
|
|
|
this.resourceTreeData = [ |
|
|
|
{ |
|
|
|
Label: eval("(" + localStorage.getItem("workshop") + ")")[0][ |
|
|
|
"Plant-Abrevname" |
|
|
|
], |
|
|
|
Children: [ |
|
|
|
{ Label: "主要资源", Children: [] }, |
|
|
|
{ Label: "次要资源", Children: [] }, |
|
|
|
], |
|
|
|
}, |
|
|
|
]; |
|
|
|
this.resourceTreeData = [ |
|
|
|
{ |
|
|
|
Label: eval("(" + localStorage.getItem("workshop") + ")")[0][ |
|
|
|
"Plant-Abrevname" |
|
|
|
], |
|
|
|
Children: [ |
|
|
|
{ Label: "主要资源", Children: [] }, |
|
|
|
{ Label: "次要资源", Children: [] } |
|
|
|
] |
|
|
|
} |
|
|
|
]; |
|
|
|
}, |
|
|
|
// 获取资源Tree数据 |
|
|
|
getResourceTreeData() { |
|
|
@ -200,7 +204,7 @@ export default { |
|
|
|
axios.spread((mainData, secondaryData) => { |
|
|
|
this.resourceTreeLoading = false; |
|
|
|
// 初始化资源数据 |
|
|
|
this.initResourceTreeData() |
|
|
|
this.initResourceTreeData(); |
|
|
|
// 设置主要资源数据 |
|
|
|
if (mainData.code == 200) { |
|
|
|
mainData.data.forEach((item) => { |
|
|
@ -208,7 +212,7 @@ export default { |
|
|
|
Label: item["AP_Resource-Descr"], |
|
|
|
Children: null, |
|
|
|
Type: 1, |
|
|
|
ResourceId: item["AP_Resource-ResourceId"], |
|
|
|
ResourceId: item["AP_Resource-ResourceId"] |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
@ -219,14 +223,14 @@ export default { |
|
|
|
Label: item["AP_SecondaryResource-Descr"], |
|
|
|
Children: null, |
|
|
|
Type: 2, |
|
|
|
ResourceId: item["AP_SecondaryResource-SecondaryResourceId"], |
|
|
|
ResourceId: item["AP_SecondaryResource-SecondaryResourceId"] |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
).catch(() => { |
|
|
|
this.resourceTreeLoading = false; |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 筛选客户树 |
|
|
|
filterCustomerTree(value, data, node) { |
|
|
@ -265,51 +269,61 @@ export default { |
|
|
|
resourceNodeClick(data, node) { |
|
|
|
if (!node.data.children) { |
|
|
|
// 点击的是最低级别的子节点 |
|
|
|
this.SET_resourceId(data.ResourceId) |
|
|
|
this.SET_resourceType(data.Type+"") |
|
|
|
this.SET_resourceId(data.ResourceId); |
|
|
|
this.SET_resourceType(data.Type + ""); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="less"> |
|
|
|
.customer-wrapper { |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.customer-top-wrap { |
|
|
|
width: 100%; |
|
|
|
margin-bottom: 8px; |
|
|
|
|
|
|
|
.customer-top-left-wrap { |
|
|
|
width: 300px; |
|
|
|
background: #f1f1f1; |
|
|
|
height: 100%; |
|
|
|
border: 2px solid #919191; |
|
|
|
border-right: none; |
|
|
|
|
|
|
|
.customer-tree-wrapper { |
|
|
|
height: calc(100% - 50px); |
|
|
|
|
|
|
|
.customer-tree-wrapper-tree { |
|
|
|
padding-left: 10px; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.customer-filter-tree { |
|
|
|
background: #f1f1f1; |
|
|
|
height: calc(100% - 10px); |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.el-tree-node__content { |
|
|
|
border-bottom: 1px solid #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.el-tree-node.is-current > .el-tree-node__content { |
|
|
|
background: linear-gradient(360deg, #1f534e 0%, #2b978e 57%, #3cbdb2 100%) !important; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.customer-tree-wrapper-input { |
|
|
|
height: 50px; |
|
|
|
width: 100%; |
|
|
|
border-bottom: 4px solid #c9c9c9; |
|
|
|
|
|
|
|
.el-input { |
|
|
|
margin-left: 18px; |
|
|
|
line-height: 53px; |
|
|
|
width: calc(100% - 40px); |
|
|
|
|
|
|
|
.el-input__inner { |
|
|
|
height: 32px; |
|
|
|
line-height: 32px; |
|
|
@ -318,20 +332,22 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.customer-top-right-wrap { |
|
|
|
margin-left: 0; |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
#eaeded 0%, |
|
|
|
#ffffff 55%, |
|
|
|
#f1f1f1 100% |
|
|
|
); |
|
|
|
background: linear-gradient(180deg, |
|
|
|
#eaeded 0%, |
|
|
|
#ffffff 55%, |
|
|
|
#f1f1f1 100%); |
|
|
|
height: 100%; |
|
|
|
border: 2px solid #919191; |
|
|
|
|
|
|
|
.el-tabs { |
|
|
|
height: calc(100% - 25px); |
|
|
|
height: calc(100% - 25px); |
|
|
|
|
|
|
|
.el-tabs__content { |
|
|
|
height: calc(100% - 25px); |
|
|
|
|
|
|
|
.el-tab-pane { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
@ -339,7 +355,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.customer-bottom-wrap { |
|
|
|
width: 100%; |
|
|
|
margin-bottom: 5px; |
|
|
@ -350,19 +366,24 @@ export default { |
|
|
|
height: 100%; |
|
|
|
border: 2px solid #919191; |
|
|
|
border-right: none; |
|
|
|
|
|
|
|
.resource-tree-wrapper { |
|
|
|
height: calc(100% - 10px); |
|
|
|
|
|
|
|
.resource-tree-wrapper-tree { |
|
|
|
padding-left: 10px; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.resource-filter-tree { |
|
|
|
background: #f1f1f1; |
|
|
|
height: calc(100% - 10px); |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.el-tree-node__content { |
|
|
|
border-bottom: 1px solid #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.el-tree-node.is-current > .el-tree-node__content { |
|
|
|
background: linear-gradient(360deg, #1f534e 0%, #2b978e 57%, #3cbdb2 100%) !important; |
|
|
|
color: #fff; |
|
|
@ -370,20 +391,22 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.customer-bottom-right-wrap { |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
#eaeded 0%, |
|
|
|
#ffffff 55%, |
|
|
|
#f1f1f1 100% |
|
|
|
); |
|
|
|
background: linear-gradient(180deg, |
|
|
|
#eaeded 0%, |
|
|
|
#ffffff 55%, |
|
|
|
#f1f1f1 100%); |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
border: 2px solid #919191; |
|
|
|
|
|
|
|
.el-tabs { |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.el-tabs__content { |
|
|
|
height: calc(100% - 50px); |
|
|
|
|
|
|
|
.el-tab-pane { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|