storeTree

components/page/storeTree.vue

+<template>
+  <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>
+    </h3>
+    <div class="search">
+      <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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      keys: "",
+      expand: false,
+      list: []
+    };
+  },
+  created() {
+    this.loadTree();
+  },
+  methods: {
+    loadTree() {
+      let params = {
+        conditions: [
+          {
+            fieldName: "title",
+            fieldValue: name,
+            conditionalType: "Like"
+          }
+        ]
+      };
+      this.$api
+        .post(`${resourceUrl}/storeroomlocation/paged`, params)
+        .then(r => {
+          let res = r.result.items;
+          var data = this.$u.toTree(
+            res,
+            0,
+            u => {
+              u.expand = true;
+              u.selected = false;
+              u.checked = false;
+            },
+            "upId"
+          );
+          this.list = this.$u.clone(data);
+        });
+    },
+    toggle() {
+      this.expand = !this.expand;
+    },
+    renderContent(h, { root, node, data }) {
+      let type = "md-folder";
+      return h("span", [
+        h("Icon", {
+          props: {
+            type: type
+          },
+          style: {
+            marginRight: "8px"
+          }
+        }),
+        h(
+          "span",
+          {
+            style: {
+              color: "#000"
+            }
+          },
+          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);
+            }
+            productIds.push(u.value);
+            if (u.children) {
+              addId(u.children);
+            }
+          });
+        }
+      }
+      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);
+            }
+          }
+        });
+      }
+      return result;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.tree-menu {
+  h3 {
+    height: 50px;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    line-height: 50px;
+    color: rgba(81, 90, 110, 1);
+    background: rgba(245, 246, 250, 1);
+    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