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

14 15 16 17 18 19 20 21 22 23 24 25 26 27
  /**
   * 表单数据
   * 
   * @memberof AppOrgSelect
   */
  @Prop() public data!:any;

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

28 29 30 31 32 33 34 35 36 37 38 39 40 41
  /**
   * 填充对象
   * 
   * @memberof AppOrgSelect
   */
  @Prop() public fillMap:any;

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

42 43 44 45 46 47 48 49 50 51 52 53 54 55
  /**
   * 代码表标识
   * 
   * @memberof AppOrgSelect
   */
  @Prop() public tag?:string;

  /**
   * 代码表类型
   * 
   * @memberof AppOrgSelect
   */
  @Prop() public codelistType?:string;

56 57 58 59 60 61 62
  /**
   * 是否多选
   * 
   * @memberof AppOrgSelect
   */
  @Prop({default:false}) public multiple?:boolean;

63 64 65 66 67 68 69 70
  /**
   * 是否禁用
   *
   * @type {*}
   * @memberof AppDepartmentSelect
   */
  @Prop({default:false}) public disabled?: boolean;

tony001's avatar
tony001 committed
71 72 73 74 75 76 77
  /**
   * 查询单位路径
   * 
   * @memberof AppOrgSelect
   */
  @Prop() public url!:string;

78 79 80 81 82 83 84
  /**
   * 监听表单数据变化
   * 
   * @memberof AppOrgSelect
   */
  @Watch('data',{immediate:true,deep:true})
  onDataChange(newVal: any, oldVal: any) {
85 86 87 88 89 90
    if(newVal){
      this.computedSelectedData();
      if(this.filter){
        let tempFilterValue:any = this.initBasicData();
        // filter值变化才去请求数据
        if(tempFilterValue && (this.copyFilterValue !== tempFilterValue)){
tony001's avatar
tony001 committed
91
          this.loadTreeData(this.url.replace('${orgid}',tempFilterValue));
92
          this.copyFilterValue = tempFilterValue;
93 94 95 96 97
        }
      }
    }
  }

98 99 100 101 102
  /**
   * 选择值
   * 
   * @memberof AppOrgSelect
   */
103 104 105 106 107 108 109 110
  public selectTreeValue:any = "";

  /**
   * 树节点数据
   * 
   * @memberof AppOrgSelect
   */
  public NodesData:any = [];
111 112

  /**
113
   * 备份过滤值
114 115 116
   * 
   * @memberof AppOrgSelect
   */
117
  public copyFilterValue:any;
118 119 120 121 122 123 124

  /**
   * vue生命周期
   * 
   * @memberof AppOrgSelect
   */
  public created(){
125
    if(!this.filter){
tony001's avatar
tony001 committed
126
      this.loadTreeData(this.url);
127
    }
128 129 130 131 132 133 134 135 136 137 138
  }

  /**
   * 加载树数据
   * 
   * @memberof AppOrgSelect
   */
  public initBasicData(){
    // 计算出过滤值
    if(this.filter){
      if(this.data && this.data[this.filter]){
139
        return this.data[this.filter];
140
      }else if(this.context && this.context[this.filter]){
141 142 143
        return this.context[this.filter];
      }else{
        return null;
144 145 146 147 148
      }
    }
  }

  /**
149
   * 计算选中值
150 151 152
   * 
   * @memberof AppOrgSelect
   */
153 154 155 156
  public computedSelectedData(){
    // 单选
    if(!this.multiple){
      if(this.fillMap && Object.keys(this.fillMap).length >0){
157 158 159 160 161 162 163 164 165 166 167 168
        let templateValue:any = {};
        Object.keys(this.fillMap).forEach((item:any) =>{
          if(this.data && this.data[this.fillMap[item]]){
            Object.assign(templateValue,{[item]:this.data[this.fillMap[item]]});
          }
        })
        if(!templateValue.label && templateValue.id && this.tag && this.codelistType && Object.is(this.codelistType,"DYNAMIC")){
          this.fillLabel(templateValue,templateValue.id,(templateValue:any) =>{
            this.selectTreeValue = JSON.stringify([templateValue]);
          });
        }else{
          this.selectTreeValue = JSON.stringify([templateValue]);
169 170
        }
      }
171
    }else{
172
    // 多选
tony001's avatar
tony001 committed
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187
      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});
              }
            })
          }
        })
188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209
        let tempflag:boolean = false;
        if(tempArray.length >0 && tempArray.length >0){
          tempArray.forEach((item:any) =>{
            if(!item.label) tempflag = true;
          })
        }
        if(tempflag && this.tag && this.codelistType && Object.is(this.codelistType,"DYNAMIC")){
          let tempStatus:number = 0;
          tempArray.forEach((item:any) =>{
            if(!item.label){
              tempStatus += 1;
              this.fillLabel(item,item.id,(result:any) =>{
                item = result;
                tempStatus -= 1;
                if(tempStatus === 0){
                  this.selectTreeValue = JSON.stringify(tempArray);
                }
              })
            }
          })
        }else{
          this.selectTreeValue = JSON.stringify(tempArray);
tony001's avatar
tony001 committed
210
        }
211
      }
212
    }
213 214 215 216 217 218 219 220
  }

  /**
   * 加载树数据
   * 
   * @memberof AppOrgSelect
   */
  public loadTreeData(requestUrl:string){
tony001's avatar
tony001 committed
221
    if(this.filter){
222
      const result:any = this.$store.getters.getOrgData(requestUrl);
tony001's avatar
tony001 committed
223 224 225 226 227
      if(result){
        this.NodesData = result;
        return;
      }
    }
228 229
    Http.getInstance().get(requestUrl).then((res:any) =>{
      if(!res.status && res.status !== 200){
230
        console.error((this.$t('components.appOrgSelect.loadFail') as string));
231 232 233
        return;
      }
      this.NodesData = res.data;
tony001's avatar
tony001 committed
234
      if(this.filter){
235
        this.$store.commit('addOrgData', { srfkey: requestUrl, orgData: res.data });
tony001's avatar
tony001 committed
236
      }
237 238 239 240 241 242 243 244 245 246 247
    })
  }

  /**
   * 树选择触发事件
   * 
   * @memberof AppOrgSelect
   */
  public treeSelectChange($event:any){
    // 多选
    if(this.multiple){
248
      if(!Object.is($event,'[]')){
tony001's avatar
tony001 committed
249 250 251 252 253 254 255
        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]}`;
            })
256 257 258
            setTimeout(() => {
              this.emitValue(this.fillMap[item],tempResult);
            }, 0);
tony001's avatar
tony001 committed
259 260 261 262 263 264 265 266 267
          })
        }
      }else{
        if(this.fillMap && Object.keys(this.fillMap).length >0){
          Object.keys(this.fillMap).forEach((item:any) =>{
            this.emitValue(this.fillMap[item],null);
          })
        }
      }
268 269
    }else{
      // 单选
270
      if(!Object.is($event,'[]')){
271 272 273
        const tempValue:any = JSON.parse($event)[0];
        if(this.fillMap && Object.keys(this.fillMap).length >0){
          Object.keys(this.fillMap).forEach((item:any) =>{
274 275 276
            setTimeout(() => {
              this.emitValue(this.fillMap[item],tempValue[item]);
            }, 0);
277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294
          })
        }
      }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){
295
    this.$emit('select-change',{name:name,value:value});
296 297
  }

298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319
  /**
   * 填充label
   * 
   * @memberof AppOrgSelect
   */
  public fillLabel(tempObject:any,valueItem:any,callback:any){
    if(!tempObject.label && tempObject.id && this.tag && this.codelistType && Object.is(this.codelistType,"DYNAMIC")){
      let codeListService:CodeListService = new CodeListService();
      codeListService.getItems(this.tag).then((items:any) =>{
        if(items && items.length >0){
          let result:any = items.find((item:any) =>{
            return item.id === valueItem;
          })
          Object.assign(tempObject,{label:result.label});
        }
        callback(tempObject);
      }).catch((error:any) =>{
        console.log(error);
      })
    }
  }

320 321 322
}
</script>

323 324
<style lang="scss">
@import "./app-org-select.scss";
325
</style>