Selaa lähdekoodia

下拉机构树查询条件优化

jiawuxian 1 vuosi sitten
vanhempi
commit
08f5315796
1 muutettua tiedostoa jossa 41 lisäystä ja 32 poistoa
  1. 41 32
      src/components/orgTree/orgQuerySelector.vue

+ 41 - 32
src/components/orgTree/orgQuerySelector.vue

@@ -4,6 +4,7 @@
       v-model="val"
       :options="treeList"
       :normalizer="normalizer"
+      :default-expand-level="0"
       :clearable="clearable"
       v-bind="$attrs"
       @select="select"
@@ -27,8 +28,7 @@ export default {
   data() {
     return {
       treeList: [],
-      currentNode: null,
-      checkSub:this.defaultCheckSub
+      checkSub: this.defaultCheckSub,
     };
   },
   props: {
@@ -43,10 +43,10 @@ export default {
       //取值范围:business,org
       type: String,
       default: "business",
-    },    
-    defaultCheckSub:{
-      type:Boolean,
-      default:true
+    },
+    defaultCheckSub: {
+      type: Boolean,
+      default: true,
     },
     hangsheTree: {
       type: Boolean,
@@ -67,25 +67,18 @@ export default {
       type: Boolean,
       default: true,
     },
-    clearable:{
-      type:Boolean,
-      default:false,
-    }
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
   },
   watch: {
     value(v) {
+      //补充clear时不触发select事件
       if (!v) {        
         this.$emit("click", null);
         return;
-      }
-      if (!this.currentNode || this.currentNode.id != v) {
-        this.currentNode = this.findNodeInOptions(v);
-      }
-
-      if (this.currentNode) {
-        console.info(this.currentNode);
-        this.$emit("click", this.currentNode);
-      }
+      }      
     },
     orgTree(val) {
       this.getDeptTree();
@@ -102,8 +95,8 @@ export default {
     getDeptTree() {
       if (this.customRequest) {
         this.customRequest().then((response) => {
-          this.treeList = response.data;
-          this.dataFn(response.data);
+          let treeList = response.data;
+          this.dataFn(treeList);
           return;
         });
       } else {
@@ -123,29 +116,44 @@ export default {
         } else {
           this.treeList = this.$store.getters.orgTree;
         }
+
         this.dataFn(this.treeList);
       }
     },
     dataFn(arr) {
       if (!arr || arr.length === 0) return;
-      console.log(arr, "arrr");
+      // console.log(arr, "arrr");
 
       if (arr && arr.length > 0) {
+        if (arr.length == 1) {
+          arr[0].isDefaultExpanded = true;
+        }
+
+        let defaultSelectedNode;
         if (!this.val) {
           this.val = arr[0].id;
+          defaultSelectedNode = arr[0];
+          //     let v=this.val
+
+          // debugger
+        } else {
+          if (this.value) {
+            defaultSelectedNode = this.findNodeInOptions(this.value);
+          }
         }
 
-        this.currentNode = this.findNodeInOptions(this.val);
-        if (this.currentNode) {
-          this.$emit("defaultKey", this.currentNode.id);
-          this.$emit("defaultOrg", this.currentNode);
+        if (defaultSelectedNode) {
+          this.$emit("defaultKey", defaultSelectedNode.id);
+          this.$emit("defaultOrg", { ...defaultSelectedNode });
         }
+
+        this.treeList = arr;
       }
       // setTimeout(() => {
       //   this.$refs.tree.setCurrentKey(arr[0].id);
       // }, 100);
     },
-   
+
     findNodeInOptions(id) {
       if (!id) {
         return;
@@ -180,11 +188,12 @@ export default {
         id: node.id,
         label: node[this.label],
         children: node.children,
+        isDefaultExpanded: node.isDefaultExpanded,
       };
     },
     select(node) {
-      this.currentNode = node;
-      this.value=node.id
+      this.$emit("click", node);     
+
     },
     changeCheckBox(state) {
       this.$emit("checkChange", state);
@@ -198,12 +207,12 @@ export default {
 <style lang="scss" scoped>
 .org_query_selector {
   display: flex;
-  
-  ::v-deep .vue-treeselect{
+
+  ::v-deep .vue-treeselect {
     width: 205px;
   }
 }
-.org_query_selector div:first-child{
+.org_query_selector div:first-child {
   margin-right: 20px;
 }
 ::v-deep {