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