物料管理--左侧树

components/modalTree/storeHouseLeft.vue

@@ -66,6 +66,7 @@ export default {
       this.$http.storeHouse
         .getpaged({ materialType: this.type })
         .then((res) => {
+        console.log(res.result)
           if (res.result) {
             let items = res.result
             this.tree = this.getTrees(items)

components/modalTree/storeHouseTree.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="tree" ref="tree" @on-select-change="change" :render="renderContent"></Tree>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      expand: false,
+      ids: [],
+      tree: [],
+      divHeight:'',
+      
+      keys: "",
+      // list: []
+    };
+  },
+  created() {
+    this.loadTree();
+  },
+  methods: {
+    toggle() {
+      this.expand = !this.expand;
+      this.loadTree()
+    },
+    async loadTree() {
+      this.$http.storeHouse
+        .getpaged({ materialType: this.type })
+        .then((res) => {
+        console.log(res.result)
+          if (res.result) {
+            let items = res.result;
+            // let item = this.$u.clone(res.result);
+            console.log('items:',items)
+            this.tree = this.getTrees(items)
+            this.change1(this.tree)
+
+            search(this.keys, items);
+            function search(keys, items) {
+              items.map(u => {
+                if (keys.length < 3) {
+                  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);
+                  }
+                }
+              });
+            }
+
+          } else {
+            this.$Message.error('加载库房库位树失败!')
+          }
+        })
+    },
+    //重构左侧树
+    getTrees(trees) {
+      var expand = this.expand
+      trees.forEach((data, index) => {
+        var that = this
+        data.expand = expand
+        if (data.children.length > 0) {
+          this.getTrees(data.children)
+        }
+      })
+      return trees
+    },
+    renderContent(h, { root, node, data }) {
+      return h(
+        'span',
+        {
+          style: {
+            color: data.isClick ? '#000' : '#bbb', //根据选中状态设置样式
+            cursor: data.isClick ? 'pointer' : '',
+            background: node.node.selected&&data.isClick ? '#AAD8D4' : '#ffffff',
+            paddingLeft: '10px',
+            paddingRight: '10px',
+            paddingTop: '3px',
+            paddingBottom: '3px'
+          },
+          on: {
+            // click: () => {
+            //   if (!node.node.selected) {
+            //     this.$refs.tree.handleSelect(node.nodeKey) //手动选择树节点
+            //   }
+            // }
+          }
+        },
+        data.title
+      )
+    },
+
+    //得到此树节点下所有是产品的Id
+    getAllIds(trees) {
+      trees.forEach((data, index) => {
+        var that = this
+        if (data.isClick) {
+          this.ids.push(data.id)
+        }
+        if (data.children.length > 0) {
+          this.getAllIds(data.children)
+        }
+      })
+    },
+    change(value) {
+      if (value.length > 0) {
+        if (value[0].isClick) {
+          this.ids = []
+          this.getAllIds(value)
+          if (this.ids.length > 0) {
+            this.$emit('storeIds', this.ids)
+            //this.easySearch.storeId.value = this.ids
+          } else {
+            this.$emit('storeIds', [-1])
+          }
+        } else {
+          this.$Message.error('当前操作用户无此库位的权限')
+          this.$emit('storeIds', [-1])
+        }
+      }
+    },
+    change1(value) {
+      if (value.length > 0) {
+        this.ids = []
+        this.getAllIds(value)
+        if (this.ids.length > 0) {
+          this.$emit('storeIds', this.ids)
+        } else {
+          this.$emit('storeIds', [-1])
+        }
+      }
+    },
+    // loadTree() {
+    //   this.$http.storeHouse.getpaged({ materialType: this.type })
+    //     .then(r => {
+    //     console.log(r.result)
+    //       var data = r.result;
+    //       this.list = this.$u.clone(data);
+    //     })
+    // },
+    // change(v, b) {
+    //   let ids = [];
+    //   ids.push(b.value);
+    //   if (b.children) {
+    //     addId(b.children);
+    //     function addId(data) {
+    //       data.map(u => {
+    //         ids.push(u.value);
+    //         if (u.children) {
+    //           addId(u.children);
+    //         }
+    //       });
+    //     }
+    //   }
+    //   this.$emit("on-select", b.value, b, 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 < 3) {
+            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

pages/resource/material/powder/index.vue

@@ -3,7 +3,16 @@
     <Sider hide-trigger :style="{ background: '#fff' }" class="menu" width="240" style=" flex:0;">
       <StoreHouseLeft @storeIds="storeIds" :type="1"></StoreHouseLeft>
     </Sider>
-    <Content class="content">
+    <!-- <Sider hide-trigger v-if="showMenu" class="menu_side" width="300"> -->
+      <!-- <storeHouseTree @on-hide="onHide" @storeIds="storeIds" :type="1"/> -->
+      <!--  @on-select="productSearch"  -->
+    <!-- </Sider> -->
+    <div v-if="!showMenu" class="show_menu">
+      <a class="menu_play fr" @click="showMenuFn" title="展开">
+        <Icon type="ios-arrow-forward" size="24" />
+      </a>
+    </div>
+    <Content class="content" :class="!showMenu?'con_bord':''">
       <DataGrid
         :columns="columns"
         ref="grid"
@@ -73,6 +82,7 @@ import Detail from "./detail";
 import Search from "./search";
 import Inventory from "./inventory";
 import StoreHouseLeft from "@/components/modalTree/storeHouseLeft.vue";
+import storeHouseTree from '@/components/modalTree/storeHouseTree.vue'
 export default {
   name: "list",
   components: {
@@ -81,10 +91,12 @@ export default {
     Detail,
     Search,
     Inventory,
-    StoreHouseLeft
+    StoreHouseLeft,
+    storeHouseTree
   },
   data() {
     return {
+      showMenu: true,
       action: Api.index,
       addModal: false,
       editModal: false,
@@ -316,6 +328,20 @@ export default {
     this.tdHeight = window.innerHeight - 260
   },
   methods: {
+    onHide() {
+      this.showMenu = false;
+    },
+    showMenuFn() {
+      this.showMenu = true;
+    },
+    // productSearch(id, item, ids) {
+    //   let where = { productId: { op: "In", value: ids } };
+    //   this.$refs.grid.reload(where);
+    // },
+    storeIds(val) {
+      this.easySearch.storeId.value = val;
+      this.$refs.grid.easySearch();
+    },
     addOk() {
       this.$refs.grid.load();
       this.addModal = false;
@@ -389,10 +415,6 @@ export default {
       let vkey = "MaterialPowder" + "." + key;
       return this.$t(vkey) || key;
     },
-    storeIds(val) {
-      this.easySearch.storeId.value = val;
-      this.$refs.grid.easySearch();
-    }
   }
 };
 </script>

pages/resource/material/scraper/index.vue

@@ -63,6 +63,7 @@ import Detail from './detail'
 import Search from './search'
 import Inventory from './inventory'
 import StoreHouseLeft from '@/components/modalTree/storeHouseLeft.vue'
+// import StoreHouseLeft from '@/components/modalTree/storeHouseTree.vue'
 export default {
   name: 'list',
   components: {

pages/technology/index.vue

@@ -331,6 +331,10 @@ export default {
       //this.$Message.info("展开左侧树")
       this.showMenu = true;
     },
+    productSearch(id, item, ids) {
+      let where = { productId: { op: "In", value: ids } };
+      this.$refs.grid.reload(where);
+    },
     // 详情页面
     view(row) {
       // this.$router.push("technology/details");
@@ -358,10 +362,6 @@ export default {
     search() {
       this.$refs.grid.reload(this.easySearch);
     },
-    productSearch(id, item, ids) {
-      let where = { productId: { op: "In", value: ids } };
-      this.$refs.grid.reload(where);
-    },
     add() {
       this.curId = 0;
       this.title = "新增";