<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" :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 "@/components/do/a6.service-and-supply-purchase/contents.vue";
|
import ConsumableOverview from "@/components/caorui/6-6/ConsumableOverview/index.vue";
|
import QualifiedSuppliers from "@/components/caorui/6-6/QualifiedSuppliers/index.vue";
|
import {suppliersDirectoryContentsSuppliersDirectoryContentsListing } from "@/assets/api/api";
|
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() {
|
this.$axios
|
.get(suppliersDirectoryContentsSuppliersDirectoryContentsListing)
|
.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>
|
