app-org-select.vue 5.8 KB
Newer Older
tony001's avatar
tony001 committed
1 2
<template>
  <div class="app-org-select">
tony001's avatar
tony001 committed
3
    <ibiz-select-tree :NodesData="NodesData" v-model="selectTreeValue" :multiple="multiple" @select="treeSelectChange"></ibiz-select-tree>
tony001's avatar
tony001 committed
4 5 6
  </div>
</template>
<script lang = 'ts'>
tony001's avatar
tony001 committed
7 8
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { Http } from '@/utils';
tony001's avatar
tony001 committed
9 10 11
@Component({})
export default class AppOrgSelect extends Vue {

tony001's avatar
tony001 committed
12 13 14 15 16 17 18 19 20 21 22 23 24 25
  /**
   * 表单数据
   * 
   * @memberof AppOrgSelect
   */
  @Prop() public data!:any;

  /**
   * 上下文
   * 
   * @memberof AppOrgSelect
   */
  @Prop() public context!:any;

tony001's avatar
tony001 committed
26 27 28 29 30 31 32 33 34 35 36 37 38 39
  /**
   * 填充对象
   * 
   * @memberof AppOrgSelect
   */
  @Prop() public fillMap:any;

  /**
   * 过滤项
   * 
   * @memberof AppOrgSelect
   */
  @Prop() public filter?:string;

tony001's avatar
tony001 committed
40 41 42 43 44 45 46
  /**
   * 是否多选
   * 
   * @memberof AppOrgSelect
   */
  @Prop({default:false}) public multiple?:boolean;

tony001's avatar
tony001 committed
47 48 49 50 51 52 53
  /**
   * 查询单位路径
   * 
   * @memberof AppOrgSelect
   */
  @Prop() public url!:string;

tony001's avatar
tony001 committed
54 55 56 57 58 59 60
  /**
   * 监听表单数据变化
   * 
   * @memberof AppOrgSelect
   */
  @Watch('data',{immediate:true,deep:true})
  onDataChange(newVal: any, oldVal: any) {
tony001's avatar
tony001 committed
61 62 63 64 65 66
    if(newVal){
      this.computedSelectedData();
      if(this.filter){
        let tempFilterValue:any = this.initBasicData();
        // filter值变化才去请求数据
        if(tempFilterValue && (this.copyFilterValue !== tempFilterValue)){
tony001's avatar
tony001 committed
67
          this.loadTreeData(this.url.replace('${orgid}',tempFilterValue));
tony001's avatar
tony001 committed
68
          this.copyFilterValue = tempFilterValue;
tony001's avatar
tony001 committed
69 70 71 72 73
        }
      }
    }
  }

tony001's avatar
tony001 committed
74 75 76 77 78
  /**
   * 选择值
   * 
   * @memberof AppOrgSelect
   */
tony001's avatar
tony001 committed
79 80 81 82 83 84 85 86
  public selectTreeValue:any = "";

  /**
   * 树节点数据
   * 
   * @memberof AppOrgSelect
   */
  public NodesData:any = [];
tony001's avatar
tony001 committed
87 88

  /**
tony001's avatar
tony001 committed
89
   * 备份过滤值
tony001's avatar
tony001 committed
90 91 92
   * 
   * @memberof AppOrgSelect
   */
tony001's avatar
tony001 committed
93
  public copyFilterValue:any;
tony001's avatar
tony001 committed
94 95 96 97 98 99 100

  /**
   * vue生命周期
   * 
   * @memberof AppOrgSelect
   */
  public created(){
tony001's avatar
tony001 committed
101
    if(!this.filter){
tony001's avatar
tony001 committed
102
      this.loadTreeData(this.url);
tony001's avatar
tony001 committed
103
    }
tony001's avatar
tony001 committed
104 105 106 107 108 109 110 111 112 113 114
  }

  /**
   * 加载树数据
   * 
   * @memberof AppOrgSelect
   */
  public initBasicData(){
    // 计算出过滤值
    if(this.filter){
      if(this.data && this.data[this.filter]){
tony001's avatar
tony001 committed
115
        return this.data[this.filter];
tony001's avatar
tony001 committed
116
      }else if(this.context && this.context[this.filter]){
tony001's avatar
tony001 committed
117 118 119
        return this.context[this.filter];
      }else{
        return null;
tony001's avatar
tony001 committed
120 121 122 123 124
      }
    }
  }

  /**
tony001's avatar
tony001 committed
125
   * 计算选中值
tony001's avatar
tony001 committed
126 127 128
   * 
   * @memberof AppOrgSelect
   */
tony001's avatar
tony001 committed
129 130 131 132 133 134 135 136 137 138 139 140
  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]);
      }
tony001's avatar
tony001 committed
141
    }else{
tony001's avatar
tony001 committed
142
    // 多选
tony001's avatar
tony001 committed
143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
      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);
        }
tony001's avatar
tony001 committed
160
    }
tony001's avatar
tony001 committed
161 162 163 164 165 166 167 168
  }

  /**
   * 加载树数据
   * 
   * @memberof AppOrgSelect
   */
  public loadTreeData(requestUrl:string){
tony001's avatar
tony001 committed
169 170 171 172 173 174 175
    if(this.filter){
      const result:any = this.$store.getters.getCopyData(this.filter);
      if(result){
        this.NodesData = result;
        return;
      }
    }
tony001's avatar
tony001 committed
176 177 178 179 180 181
    Http.getInstance().get(requestUrl).then((res:any) =>{
      if(!res.status && res.status !== 200){
        console.error("加载数据失败");
        return;
      }
      this.NodesData = res.data;
tony001's avatar
tony001 committed
182 183 184
      if(this.filter){
        this.$store.commit('addOrgData', { srfkey: this.filter, orgData: res.data });
      }
tony001's avatar
tony001 committed
185 186 187 188 189 190 191 192 193 194 195
    })
  }

  /**
   * 树选择触发事件
   * 
   * @memberof AppOrgSelect
   */
  public treeSelectChange($event:any){
    // 多选
    if(this.multiple){
tony001's avatar
tony001 committed
196
      if(!Object.is($event,'[]')){
tony001's avatar
tony001 committed
197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213
        const tempValue:any = JSON.parse($event);
        if(this.fillMap && Object.keys(this.fillMap).length >0){
          Object.keys(this.fillMap).forEach((item:any) =>{
            let tempResult:any ="";
            tempValue.forEach((value:any,index:number) =>{
              tempResult += index>0?`,${value[item]}`:`${value[item]}`;
            })
            this.emitValue(this.fillMap[item],tempResult);
          })
        }
      }else{
        if(this.fillMap && Object.keys(this.fillMap).length >0){
          Object.keys(this.fillMap).forEach((item:any) =>{
            this.emitValue(this.fillMap[item],null);
          })
        }
      }
tony001's avatar
tony001 committed
214 215
    }else{
      // 单选
tony001's avatar
tony001 committed
216
      if(!Object.is($event,'[]')){
tony001's avatar
tony001 committed
217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238
        const tempValue:any = JSON.parse($event)[0];
        if(this.fillMap && Object.keys(this.fillMap).length >0){
          Object.keys(this.fillMap).forEach((item:any) =>{
            this.emitValue(this.fillMap[item],tempValue[item]);
          })
        }
      }else{
        if(this.fillMap && Object.keys(this.fillMap).length >0){
          Object.keys(this.fillMap).forEach((item:any) =>{
            this.emitValue(this.fillMap[item],null);
          })
        }
      }
    }
  }

  /**
   * 抛值
   * 
   * @memberof AppOrgSelect
   */
  public emitValue(name:string,value:any){
tony001's avatar
tony001 committed
239
    this.$emit('select-change',{name:name,value:value});
tony001's avatar
tony001 committed
240 241 242 243 244 245 246 247
  }

}
</script>

<style lang="less">
@import "./app-org-select.less";
</style>