shopTreeLeft

pages/crm/customer/shopTreeLeft.vue

@@ -16,21 +16,22 @@
         </Button>
       </ButtonGroup>
     </h3>
-    <div class="tree">
+    <div class="tree" :style="{height:divHeight}">
       <Tree ref="tree" :data="tree" @on-select-change="change" :render="renderContent" />
     </div>
   </div>
 </template>
 <script>
-import Api from './api'
+import Api from "./api";
 export default {
-  name: 'shopTreeLeft',
+  name: "shopTreeLeft",
   data() {
     return {
       expand: true,
       ids: [],
-      tree: []
-    }
+      tree: [],
+      divHeight: ""
+    };
   },
   props: {
     CId: {
@@ -38,57 +39,67 @@ export default {
       default: 0
     }
   },
-  mounted() {},
+  mounted() {
+      window.onresize = () => {
+      ///浏览器窗口大小变化
+      return (() => {
+        window.screenHeight = window.innerHeight;
+        this.divHeight = window.innerHeight - 240 + "px";
+      })();
+    };
+  },
   created() {
-    this.loadTree()
+    this.loadTree();
+    var theight = window.innerHeight - 240 + "px";
+    this.divHeight = theight;
   },
   methods: {
     toggle() {
-      this.expand = !this.expand
-      this.getTrees(this.tree)
+      this.expand = !this.expand;
+      this.getTrees(this.tree);
       //this.loadTree()
     },
     async loadTree() {
       //alert(this.CId)
-      Api.getshoptree({ Id: this.CId }).then((r) => {
+      Api.getshoptree({ Id: this.CId }).then(r => {
         if (r.success) {
           if (r.result.length > 0) {
-            this.tree = r.result
-            this.change1(this.tree)
+            this.tree = r.result;
+            this.change1(this.tree);
           } else {
-            this.tree = [
-              { title: '暂无组织信息', value: -100, expand: true, children: [] }
-            ],
-            this.$emit('storeIds', [-100])
-            this.$emit('treeData', r.result)
+            (this.tree = [
+              { title: "暂无组织信息", value: -100, expand: true, children: [] }
+            ]),
+              this.$emit("storeIds", [-100]);
+            this.$emit("treeData", r.result);
           }
         }
-      })
+      });
     },
     //重构左侧树
     getTrees(trees) {
-      var expand = this.expand
+      var expand = this.expand;
       trees.forEach((data, index) => {
-        var that = this
-        data.expand = expand
+        var that = this;
+        data.expand = expand;
         if (data.children.length > 0) {
-          this.getTrees(data.children)
+          this.getTrees(data.children);
         }
-      })
-      return trees
+      });
+      return trees;
     },
     renderContent(h, { root, node, data }) {
       return h(
-        'span',
+        "span",
         {
           style: {
-            color: '#000', //根据选中状态设置样式
-            cursor: 'pointer',
-            background: node.node.selected ? '#AAD8D4' : '#ffffff',
-            paddingLeft: '10px',
-            paddingRight: '10px',
-            paddingTop: '3px',
-            paddingBottom: '3px'
+            color: "#000", //根据选中状态设置样式
+            cursor: "pointer",
+            background: node.node.selected ? "#AAD8D4" : "#ffffff",
+            paddingLeft: "10px",
+            paddingRight: "10px",
+            paddingTop: "3px",
+            paddingBottom: "3px"
           },
           on: {
             // click: () => {
@@ -99,47 +110,47 @@ export default {
           }
         },
         data.title
-      )
+      );
     },
 
     //得到此树节点下所有是产品的Id
     getAllIds(trees) {
       trees.forEach((data, index) => {
-        var that = this
-        this.ids.push(data.value)
+        var that = this;
+        this.ids.push(data.value);
         if (data.children.length > 0) {
-          this.getAllIds(data.children)
+          this.getAllIds(data.children);
         }
-      })
+      });
     },
     change(value) {
       if (value.length > 0) {
-        this.ids = []
-        this.getAllIds(value)
+        this.ids = [];
+        this.getAllIds(value);
         if (this.ids.length > 0) {
-          this.$emit('storeIds', this.ids)
+          this.$emit("storeIds", this.ids);
           //this.easySearch.storeId.value = this.ids
         } else {
-          this.$emit('storeIds', [-1])
+          this.$emit("storeIds", [-1]);
         }
       } else {
-        this.$emit('storeIds', [-1])
+        this.$emit("storeIds", [-1]);
       }
-      this.$emit('treeData', value)
+      this.$emit("treeData", value);
     },
     change1(value) {
       if (value.length > 0) {
-        this.ids = []
-        this.getAllIds(value)
+        this.ids = [];
+        this.getAllIds(value);
         if (this.ids.length > 0) {
-          this.$emit('storeIds', this.ids)
+          this.$emit("storeIds", this.ids);
         } else {
-          this.$emit('storeIds', [-1])
+          this.$emit("storeIds", [-1]);
         }
       } else {
-        this.$emit('storeIds', [-1])
+        this.$emit("storeIds", [-1]);
       }
     }
   }
-}
+};
 </script>