左侧树

components/modalTree/technologyTree.vue

+<template>
+  <div>
+    <h3 class="title">
+      <Input search placeholder="请输入查询条件" clearable v-model="treeInputSearch" />
+      <ButtonGroup class="fr" size="small">
+        <Button>
+          <Icon
+            :type="expand ? 'md-arrow-dropright' : 'md-arrow-dropdown'"
+            size="16"
+            @click="toggle"
+            title="展开/合并"
+          />
+        </Button>
+        <Button>
+          <Icon type="md-refresh" size="16" @click="loadTree" title="刷新" />
+        </Button>
+      </ButtonGroup>
+    </h3>
+    <div class="tree" :style="{height:divHeight}">
+      <Tree
+        :data="searchList"
+        @on-select-change="selectTreeNode"
+      />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'technologyTree',
+  data() {
+    return {
+      expand: false,
+      treeData: [],
+      treeInputSearch: '',
+    }
+  },
+  props: {
+    type: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed:{
+    searchList() {
+      let nodeList = this.treeData
+      var text = this.treeInputSearch
+      var newNodeList = []
+      function searchTree(nodeLists, value) {
+        for (let i = 0; i < nodeLists.length; i++) {
+          if (nodeLists[i].title.indexOf(value) != -1) {
+            newNodeList.push(nodeLists[i])
+          } else if (nodeLists[i].children.length > 0) {
+            searchTree(nodeLists[i].children, value)
+          }
+        }
+      }
+      if (text != '') {
+        searchTree(nodeList, text)
+      } else {
+        return nodeList
+      }
+      return newNodeList
+    }
+  },
+  mounted() {
+     window.onresize = () => {
+      ///浏览器窗口大小变化
+      return (() => {
+        window.screenHeight = window.innerHeight;
+        this.divHeight = window.innerHeight - 260 + "px";
+      })();
+    };
+  },
+  created() {
+    this.loadTree()
+     var theight = window.innerHeight - 260 + 'px'
+    this.divHeight = theight
+  },
+  methods: {
+    toggle() {
+      this.expand = !this.expand
+      this.loadTree()
+    },
+    async loadTree() {
+      var sumData = []
+      this.$http.order.getallselecttree().then((res) => {
+          if (res.result) {
+            for (var i = 0; i < res.result.length; i++) {
+            sumData = sumData.concat(res.result[i])
+          }
+          this.treeData = sumData
+          } else {
+            this.$Message.error('加载产品树失败!')
+          }
+        })
+    },
+    selectTreeNode(value) {
+      if (value != null && value.length > 0) {
+        this.ProductSelected = value
+      }
+
+      if (value.length > 0) {
+        this.ids = []
+        this.getAllIds(value)
+        if (this.ids.length > 0) {
+          this.productid = this.ids.join(',')
+        } else {
+          this.productid = '-1'
+        }
+        this.pageindex = 1
+        this.loaddata()
+      }
+    },
+    //重构左侧树
+    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])
+        }
+      }
+    }
+  }
+}
+</script>

pages/technology/index.vue

@@ -11,6 +11,7 @@
               <Icon type="ios-arrow-back" size="24" />
             </a>
           </h4>
+          <StoreHouseLeft @storeIds="storeIds" :type="4"></StoreHouseLeft>
         </div>
       </Sider>
         <div v-if="!showMenu" class="show_menu">
@@ -27,8 +28,9 @@
 </template>
 
 <script>
+import StoreHouseLeft from "@/components/modalTree/storeHouseLeft.vue";
 export default {
-  components: {},
+  components: {StoreHouseLeft},
   data() {
     return {
       showMenu:true,