lxm-- 部门选择组件--fix2

src/components/app-department-select/app-department-select.vue

 <template>
   <div class="app-department-select">
-    <ibiz-select-tree  :NodesData="Nodesdata" :value="value" :multiple="multiple" @select="onSelect"></ibiz-select-tree>
+    <ibiz-select-tree  :NodesData="Nodesdata" v-model="selectTreeValue" :multiple="multiple" @select="onSelect"></ibiz-select-tree>
   </div>
 </template>
 
@@ -43,14 +43,6 @@ export default class AppDepartmentSelect extends Vue {
      */
     @Prop({default:false}) public multiple?: any;
 
-    /**
-     * 表单项名称
-     *
-     * @type {*}
-     * @memberof AppDepartmentSelect
-     */
-    @Prop() public name!: any;
-
     /**
      * 表单数据
      *
@@ -60,20 +52,20 @@ export default class AppDepartmentSelect extends Vue {
     @Prop() public data!: any;
 
     /**
-     * 表单项值
+     * 上下文变量
      *
      * @type {*}
      * @memberof AppDepartmentSelect
      */
-    @Prop() public value!: any;
+    @Prop() public context!: any;
 
     /**
-     * 上下文变量
+     * 选中数值
      *
      * @type {*}
      * @memberof AppDepartmentSelect
      */
-    @Prop() public context!: any;
+    public selectTreeValue:any = "";
 
     /**
      * 树节点数据
@@ -96,26 +88,41 @@ export default class AppDepartmentSelect extends Vue {
      *
      * @memberof AppDepartmentSelect
      */
-    public searchNodesData(){
-      // 处理请求参数
-      let param = ''
+    public handleFilter(){
       if(this.filter){
           if(this.data && this.data[this.filter]){
-            param= this.data[this.filter];
+            return this.data[this.filter];
           }else if(this.context && this.context[this.filter]){
-            param= this.context[this.filter];
+            return this.context[this.filter];
           }
       }else{
-          param = this.context.srforgid;
+          return this.context.srforgid;
+      }
     }
+
+    /**
+     * 获取节点数据
+     *
+     * @memberof AppDepartmentSelect
+     */
+    public searchNodesData(){
+      // 处理过滤参数，生成url
+      let param = this.handleFilter();
       let _url = this.url.replace(/{orgid}/,param)
       if(this.oldurl === _url){
           return;
       }
+      this.oldurl = _url;
+      // 缓存机制
+      const result:any = this.$store.getters.getCopyData(_url);
+      if(result){
+        this.Nodesdata = result;
+        return;
+      }
       this.$http.get(_url).then((response: any) => {
           console.log(response)
           this.Nodesdata = response.data;
-          this.oldurl = _url;
+          this.$store.commit('addDepData', { srfkey: this.filter, orgData: response.data });
       }).catch((response: any) => {
           if (!response || !response.status || !response.data) {
               this.$Notice.error({ title: '错误', desc: '系统异常！' });
@@ -131,9 +138,53 @@ export default class AppDepartmentSelect extends Vue {
      * @param {*} oldVal
      * @memberof AppDepartmentSelect
      */
-    @Watch('data',{deep:true})
+    @Watch('data',{immediate:true,deep:true})
     public onValueChange(newVal: any, oldVal: any) {
+        if(newVal){
+          this.computedSelectedData();
+          this.$nextTick(()=>{
             this.searchNodesData();
+          });
+        }
+    }
+
+    /**
+     * 计算选中值
+     * 
+     * @memberof AppOrgSelect
+     */
+    public computedSelectedData(){
+      // 单选
+      if(!this.multiple){
+        if(this.fillMap && Object.keys(this.fillMap).length >0){
+        let templateValue = {};
+        Object.keys(this.fillMap).forEach((item:any) =>{
+          if(this.data && this.data[this.fillMap[item]]){
+            Object.assign(templateValue,{[item]:this.data[this.fillMap[item]]});
+          }
+        })
+        this.selectTreeValue = JSON.stringify([templateValue]);
+        }
+      }else{
+      // 多选
+        if(this.fillMap && Object.keys(this.fillMap).length >0){
+          let tempArray:Array<any> = [];
+          Object.keys(this.fillMap).forEach((item:any) =>{
+            if(this.data && this.data[this.fillMap[item]]){
+              let tempDataArray:Array<any> = (this.data[this.fillMap[item]]).split(",");
+              tempDataArray.forEach((tempData:any,index:number) =>{
+                if(tempArray.length < tempDataArray.length){
+                  let singleData:any ={[item]:tempData};
+                  tempArray.push(singleData);
+                }else{
+                  Object.assign(tempArray[index],{[item]:tempData});
+                }
+              })
+            }
+          })
+          this.selectTreeValue = JSON.stringify(tempArray);
+          }
+      }
     } 
 
     /**
@@ -145,18 +196,12 @@ export default class AppDepartmentSelect extends Vue {
     public onSelect($event:any){
         // 组件自身抛值事件
         let selectArr = JSON.parse($event);
-        if(selectArr.length === 0){
-            this.$emit('select-change',  { name: this.name, value: $event});
-            return;
-        }
-        let valueArr = selectArr.map((item:any)=>{return {id:item.id,label:item.label}});
-        this.$emit('select-change', { name: this.name, value: JSON.stringify(valueArr) });
         // fillMap抛值事件
         if(this.fillMap && Object.keys(this.fillMap).length > 0){
             Object.keys(this.fillMap).forEach((attribute:string) => {
                 let _name = this.fillMap[attribute];
                 let _value = selectArr.map((item:any) => item[attribute]);
-                this.$emit('select-change',{name: _name, value: _value.join(",")})
+                this.$emit('select-change',{name: this.fillMap[attribute], value: _value.join(",")})
             });
         }
 

src/store/getters.ts

@@ -99,3 +99,13 @@ export const getOrgData = (state: any) => (srfkey: string) => {
     let orgData = state.orgDataMap[srfkey];
     return orgData;
 }
+
+/**
+ * 获取部门数据
+ * 
+ * @param state 
+ */
+export const getDepData = (state: any) => (srfkey: string) => {
+  let depData = state.depDataMap[srfkey];
+  return depData;
+}
\ No newline at end of file

src/store/mutations.ts

@@ -278,3 +278,15 @@ export const addOrgData = (state: any, args: {srfkey: string,orgData: any}) => {
         state.orgDataMap[args.srfkey] = JSON.parse(JSON.stringify(args.orgData));
     }
   }
+
+/**
+ * 添加部门数据
+ * 
+ * @param state 
+ * @param args 
+ */
+export const addDepData = (state: any, args: {srfkey: string,depData: any}) => {
+    if(args && args.srfkey && args.depData){
+        state.depDataMap[args.srfkey] = JSON.parse(JSON.stringify(args.depData));
+    }
+}
\ No newline at end of file

src/store/state.ts

@@ -15,4 +15,5 @@ export const rootstate: any = {
     viewSplit: {},
     copyDataMap:{},
     orgDataMap:{},
+    depDataMap:{},
 }
\ No newline at end of file