<template>
|
<div class="purchase-page">
|
<div class="purchase-left">
|
<el-input v-model="form.nodeName" placeholder="请输入节点名称" suffix-icon="el-icon-search" size="small" clearable
|
@keyup.enter.native="searchFilter(treeData)" @blur="searchFilter(treeData)" @clear="searchFilter(treeData)">
|
</el-input>
|
<el-tree ref="tree" highlight-current :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
|
:default-expanded-keys="expandedKeys" node-key="id">
|
</el-tree>
|
</div>
|
<div class="purchase-right">
|
<el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%">
|
<el-tab-pane label="总览" name="1" style="height: 100%">
|
<ConsumableOverview v-if="activeName == '1'" ref="consumableOverviewRef" :contentsId="contentsId"
|
style="height: 100%"></ConsumableOverview>
|
</el-tab-pane>
|
<el-tab-pane label="合格供方名录" name="2">
|
<QualifiedSuppliers v-if="activeName == '2'" :contentsId="contentsId"></QualifiedSuppliers>
|
</el-tab-pane>
|
<el-tab-pane label="目录维护" name="3">
|
<Contents v-if="activeName == '3'" :id="contentsId" :treeData="treeData" @contentsUpdate="contentsUpdate"
|
from="供应树"></Contents>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
<script>
|
import Contents from "./component/Contents.vue";
|
import ConsumableOverview from "./component/ConsumableOverview.vue";
|
import QualifiedSuppliers from "./component/QualifiedSuppliers.vue";
|
import { suppliersDirectoryContentsListing } from "@/api/cnas/resourceDemand/externalService/supplierManage/supplierManage.js";
|
export default {
|
components: {
|
ConsumableOverview,
|
QualifiedSuppliers,
|
Contents,
|
},
|
data() {
|
return {
|
contentsId: 0,
|
activeName: "1",
|
form: {
|
nodeName: "",
|
},
|
treeData: [],
|
expandedKeys: [],
|
defaultProps: {
|
children: "children",
|
label: "nodeName",
|
},
|
};
|
},
|
mounted() {
|
this.getTreeData();
|
},
|
methods: {
|
searchFilter() {
|
this.treeData = JSON.parse(JSON.stringify(this.treeData));
|
this.expandedKeys = [];
|
if (this.form.nodeName == "") {
|
return;
|
}
|
const findNodesWithFiber = (nodes) => {
|
nodes.forEach((node) => {
|
if (node.nodeName && node.nodeName.includes(this.form.nodeName)) {
|
this.expandedKeys.push(node.id);
|
}
|
if (node.children && node.children.length > 0) {
|
findNodesWithFiber(node.children);
|
}
|
});
|
};
|
findNodesWithFiber(this.treeData);
|
},
|
// 目录维护更新
|
contentsUpdate(val, flag = false) {
|
if (val) {
|
this.getTreeData();
|
this.expandedKeys = [];
|
if (flag) {
|
const findNodesWithFiber = (nodes) => {
|
nodes.forEach((item) => {
|
if (item.parentId == val) {
|
this.expandedKeys.push(item.id);
|
}
|
if (item.children && item.children.length > 0) {
|
findNodesWithFiber(item.children);
|
}
|
});
|
};
|
findNodesWithFiber(this.treeData);
|
this.expandedKeys = this.expandedKeys.filter((item) => item !== val);
|
} else {
|
this.expandedKeys.push(val);
|
}
|
} else {
|
this.getTreeData();
|
}
|
},
|
// 查询所有目录
|
getTreeData() {
|
suppliersDirectoryContentsListing().then((res) => {
|
this.treeData = res.data;
|
});
|
},
|
// 点击树节点
|
handleNodeClick(data) {
|
this.contentsId = data.id;
|
// this.$refs.consumableOverviewRef.getTableData(data.id)
|
},
|
handleClick(tab, event) { },
|
},
|
};
|
</script>
|
|
<style scoped>
|
.purchase-left {
|
width: 250px;
|
height: 100%;
|
background: #fff;
|
margin-right: 10px;
|
border-radius: 16px;
|
box-sizing: border-box;
|
padding: 10px 16px;
|
flex-shrink: 0;
|
}
|
|
.purchase-right {
|
background: #fff;
|
width: calc(100% - 15em);
|
height: 100%;
|
border-radius: 16px;
|
box-sizing: border-box;
|
padding: 10px 16px;
|
}
|
|
.purchase-page {
|
display: flex;
|
padding-top: 10px;
|
padding-bottom: 10px;
|
box-sizing: border-box;
|
width: 100%;
|
}
|
|
>>>.el-tabs__content {
|
height: calc(100% - 40px);
|
}
|
</style>
|
