Skip to content

M
mes-ui
Commit 7d0b08b0 authored by renjintao's avatar renjintao
Browse files
Options

productTree

parent fa7ccddd
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 148 deletions
components/page/productTree.vue
View file @ 7d0b08b0
<template> <template>
<div class="flex fd tree-menu"> <div class="flex fd tree-menu">
<h3> <h3>
产品结构 产品结构
<div class="fr mr10 mt10"> <div class="fr mr10 mt10">
<ButtonGroup class="fr" size="small"> <ButtonGroup class="fr" size="small">
<Button <Button :icon="expand ? 'md-arrow-dropright' : 'md-arrow-dropdown'" @click="toggle" title="展开/合并"></Button>
:icon="expand ? 'md-arrow-dropright' : 'md-arrow-dropdown'" <Button icon="md-refresh" title="刷新" @click="loadTree"></Button>
@click="toggle" <Button icon="md-rewind" title="收起" @click="hide"></Button>
title="展开/合并" </ButtonGroup>
></Button> </div>
<Button icon="md-refresh" title="刷新" @click="loadTree"></Button>
<Button icon="md-rewind" title="收起" @click="hide"></Button>
</ButtonGroup>
</div>
</h3> </h3>
<div class="search"> <div class="search">
<Input search placeholder="请输入关键字" v-model="keys" clearable /> <Input search placeholder="请输入关键字" v-model="keys" clearable />
</div> </div>
<div class="fg"> <div class="fg">
<div class="tree"> <div class="tree">
<Tree :data="data" :render="renderContent" ref="tree" @on-select-change="change"></Tree> <Tree :data="data" :render="renderContent" ref="tree" @on-select-change="change"></Tree>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "", name: "",
data() { data() {
return { return {
keys: "", keys: "",
expand: false, expand: false,
list: [] list: []
}; };
},
created() {
this.loadTree();
},
methods: {
loadTree() {
this.$api
.get(`${technologyUrl}productlevel/getproducttreenew`)
.then(r => {
setTree(r.result);
function setTree(data) {
data.map(u => {
u.title = u.name;
u.value = u.id;
// u.expand = true;
// u.selected = false;
// u.checked = false;
if (u.children) {
setTree(u.children);
}
});
}
var data = r.result;
this.list = this.$u.clone(data);
});
}, },
toggle() { created() {
this.expand = !this.expand; this.loadTree();
}, },
renderContent(h, { root, node, data }) { methods: {
let type = "md-folder"; loadTree() {
if (data.isProduct != 0) { this.$api
type = "ios-image"; .get(`${technologyUrl}productlevel/getproducttreenew`)
} .then(r => {
return h("span", [ setTree(r.result);
h("Icon", {
props: { function setTree(data) {
type: type data.map(u => {
}, u.title = u.name;
style: { u.value = u.id;
marginRight: "8px" u.expand = true;
} // u.selected = false;
}), // u.checked = false;
h( if (u.children) {
"span", setTree(u.children);
{ }
style: { });
color: data.isProduct == 0 ? "#000" : "rgba(38, 128, 235, 1)" }
var data = r.result;
this.list = this.$u.clone(data);
});
},
toggle() {
this.expand = !this.expand;
},
renderContent(h, {
root,
node,
data
}) {
let type = "md-folder";
if (data.isProduct != 0) {
type = "ios-image";
} }
}, return h("span", [
data.title h("Icon", {
) props: {
]); type: type
}, },
change(v, b) { style: {
// console.log(b); marginRight: "8px"
let ids = []; }
let productIds = []; }),
if (b.bomId !== 0) { h(
ids.push(b.bomId); "span", {
} style: {
productIds.push(b.value); color: data.isProduct == 0 ? "#000" : "rgba(38, 128, 235, 1)"
if (b.children) { }
addId(b.children); },
function addId(data) { data.title
data.map(u => { )
if (u.bomId !== 0) { ]);
ids.push(u.bomId); },
change(v, b) {
// console.log(b);
let ids = [];
let productIds = [];
if (b.bomId !== 0) {
ids.push(b.bomId);
} }
productIds.push(u.value); productIds.push(b.value);
if (u.children) { if (b.children) {
addId(u.children); addId(b.children);
function addId(data) {
data.map(u => {
if (u.bomId !== 0) {
ids.push(u.bomId);
}
productIds.push(u.value);
if (u.children) {
addId(u.children);
}
});
}
} }
}); this.$emit("on-select", b.bomId, b, productIds, ids);
},
hide() {
this.$emit("on-hide");
} }
}
this.$emit("on-select", b.bomId, b, productIds, ids);
}, },
hide() { computed: {
this.$emit("on-hide"); data() {
} let items = this.$u.clone(this.list);
}, let expand = this.expand;
computed: { let result = [];
data() { search(this.keys, items);
let items = this.$u.clone(this.list);
let expand = this.expand; function search(keys, data) {
let result = []; data.map(u => {
search(this.keys, items); if (keys.length < 2) {
function search(keys, data) { u.expand = expand;
data.map(u => { result.push(u);
if (keys.length < 2) { } else {
u.expand = expand; u.expand = expand;
result.push(u); if (u.title.indexOf(keys) > -1) {
} else { result.push(u);
u.expand = expand; } else if (u.children) {
if (u.title.indexOf(keys) > -1) { search(keys, u.children);
result.push(u); }
} else if (u.children) { }
search(keys, u.children); });
} }
} return result;
}); }
}
return result;
} }
}
}; };
</script> </script>
<style lang="less"> <style lang="less">
@import "../../assets/css/custom.less"; @import "../../assets/css/custom.less";
.tree-menu { .tree-menu {
h3 { h3 {
height: 50px; height: 50px;
font-size: 14px; font-size: 14px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
line-height: 50px; line-height: 50px;
color: @left-tree-header-color; color: @left-tree-header-color;
background: @left-tree-header-bg-color; background: @left-tree-header-bg-color;
opacity: 1; opacity: 1;
padding-left: 10px; padding-left: 10px;
} }
.search {
height: 50px; .search {
padding: 5px 10px; height: 50px;
} padding: 5px 10px;
.fg { }
flex: none;
// height:0; .fg {
overflow: auto; flex: none;
padding-left: 10px; // height:0;
} overflow: auto;
.tree { padding-left: 10px;
height: calc(100vh - 215px); }
overflow: auto;
} .tree {
height: calc(100vh - 215px);
overflow: auto;
}
} }
</style> </style>
\ No newline at end of file
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