人员，部门，单位选择器

src/app-register.ts

@@ -148,7 +148,13 @@ export const AppComponents = {
         v.component('app-select-tree-list',() => import('@/components/app-select-tree-list/app-select-tree-list.vue'));
         // 上下文菜单
         v.component('app-mob-context-menu',() => import('@/components/app-mob-context-menu/app-mob-context-menu.vue'));
+        // 单位选择器
+        v.component('app-mob-org-select',() => import('@/components/app-mob-org-select/app-mob-org-select.vue'));
+        // 部门选择器
+        v.component('app-mob-department-select',() => import('@/components/app-mob-department-select/app-mob-department-select.vue'));
         // 人员部门选择器
         v.component('app-mob-department-personnel',() => import('@/components/app-mob-department-personnel/app-mob-department-personnel.vue'));
+        v.component('app-mob-group-picker',() => import('@/components/app-mob-group-picker/app-mob-group-picker.vue'));
+        v.component('app-mob-group-select',() => import('@/components/app-mob-group-select/app-mob-group-select.vue'));
     },
 };
\ No newline at end of file

src/components/app-mob-department-select/app-mob-department-select.less

+.app-mob-department-select{
+  .ivu-dropdown{
+    .ivu-dropdown-rel{
+      .tree-input{
+        .ivu-input-suffix{
+          width: auto;
+          text-align: right;
+          .icon-arrow{
+            margin-right: 4px;
+          }
+        }
+        .el-icon-circle-close{
+          display: none;
+        }
+      }
+      .tree-input:hover{
+        .el-icon-circle-close{
+          display: inline-block;
+        }
+      }
+    }
+    .ivu-select-dropdown{
+      max-height: 200px;
+      overflow: scroll;
+      .tree-contant{
+        overflow:inherit;
+      }
+    }
+  }
+  .el-input__inner{
+    height: 32px;
+    line-height: 32px
+  }
+  .el-input__icon{
+    line-height: 32px;
+  }
+}
+
+

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

+<template>
+  <div class="app-mob-department-select">
+    <ibiz-select-tree  :NodesData="Nodesdata" v-model="selectTreeValue" :disabled="disabled" :multiple="multiple" @select="onSelect"></ibiz-select-tree>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop, Model } from 'vue-property-decorator';
+import {CodeListService} from "@/ibiz-core";
+@Component({
+})
+export default class AppMobDepartmentSelect extends Vue {
+
+    /**
+     * 接口url
+     *
+     * @type {*}
+     * @memberof AppMobDepartmentSelect
+     */
+    @Prop() public url?: any;
+
+    /**
+     * 代码表标识
+     * 
+     * @memberof AppMobDepartmentSelect
+     */
+    @Prop() public tag?:string;
+
+    /**
+     * 代码表类型
+     * 
+     * @memberof AppMobDepartmentSelect
+     */
+    @Prop() public codelistType?:string;
+
+    /**
+     * 过滤项
+     *
+     * @type {*}
+     * @memberof AppMobDepartmentSelect
+     */
+    @Prop() public filter?: any;
+
+    /**
+     * 过滤项
+     *
+     * @type {*}
+     * @memberof AppMobDepartmentSelect
+     */
+    @Prop() public fillMap?: any;
+
+    /**
+     * 是否多选
+     *
+     * @type {*}
+     * @memberof AppMobDepartmentSelect
+     */
+    @Prop({default:false}) public multiple?: any;
+
+    /**
+     * 是否禁用
+     *
+     * @type {*}
+     * @memberof AppMobDepartmentSelect
+     */
+    @Prop({default:false}) public disabled?: boolean;
+
+    /**
+     * 表单数据
+     *
+     * @type {*}
+     * @memberof AppMobDepartmentSelect
+     */
+    @Prop() public data!: any;
+
+    /**
+     * 上下文变量
+     *
+     * @type {*}
+     * @memberof AppMobDepartmentSelect
+     */
+    @Prop() public context!: any;
+
+    /**
+     * 选中数值
+     *
+     * @type {*}
+     * @memberof AppMobDepartmentSelect
+     */
+    public selectTreeValue:any = "";
+
+    /**
+     * 树节点数据
+     *
+     * @type {*}
+     * @memberof AppMobDepartmentSelect
+     */
+    public Nodesdata: any[] = [];
+
+    /**
+     * 当前树节点数据的url
+     *
+     * @type {*}
+     * @memberof AppMobDepartmentSelect
+     */
+    public oldurl: any;
+
+    /**
+     * 获取节点数据
+     *
+     * @memberof AppMobDepartmentSelect
+     */
+    public handleFilter(){
+      if(this.filter){
+          if(this.data && this.data[this.filter]){
+            return this.data[this.filter];
+          }else if(this.context && this.context[this.filter]){
+            return this.context[this.filter];
+          }
+      }else{
+          return this.context.srforgid;
+      }
+    }
+
+    /**
+     * 获取节点数据
+     *
+     * @memberof AppMobDepartmentSelect
+     */
+    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.getDepData(_url);
+      if(result){
+        this.Nodesdata = result;
+        return;
+      }
+      this.$http.get(_url).then((response: any) => {
+          this.Nodesdata = response.data;
+          this.$store.commit('addDepData', { srfkey: _url, depData: response.data });
+      }).catch((response: any) => {
+          if (!response || !response.status || !response.data) {
+            //   this.$Notice.error({ title: (this.$t('app.commonWords.error') as string), desc: (this.$t('app.commonWords.sysException') as string) });
+              return;
+          }
+      });
+    }
+
+    /**
+     * 值变化
+     *
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof AppMobDepartmentSelect
+     */
+    @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: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]);
+          }
+        }
+      }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});
+                }
+              })
+            }
+          })
+          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);
+          }
+        }
+      }
+    } 
+
+    /**
+     * select事件处理
+     * 
+     * @param {*} $event
+     * @memberof AppMobDepartmentSelect
+     */
+    public onSelect($event:any){
+        // 组件自身抛值事件
+        let selectArr = JSON.parse($event);
+        // fillMap抛值事件
+        if(this.fillMap && Object.keys(this.fillMap).length > 0){
+            Object.keys(this.fillMap).forEach((attribute:string) => {
+                let _name = this.fillMap[attribute];
+                let values = selectArr.map((item:any) => item[attribute]);
+                let _value = $event === "[]" ? null : values.join(",");
+                setTimeout(() => {
+                  this.$emit('select-change',{name: this.fillMap[attribute], value: _value});
+                },0);
+            });
+        }
+    }
+
+  /**
+   * 填充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);
+      })
+    }
+  }
+  
+}
+</script>
+
+<style lang='less'>
+@import './app-mob-department-select.less';
+</style>
\ No newline at end of file

src/components/app-mob-group-picker/app-mob-group-picker.vue

+<template>
+    <div class="ibiz-mob-group-picker">
+        <div class="ibiz-group-container">
+            <div v-if="showTree" class="ibiz-group-tree">
+                <ibiz-select-tree :NodesData="treeItems" v-model="treeSelectVal" :treeOnly="true" :defaultChecked="true" @select="treeSelect"></ibiz-select-tree>
+            </div>
+            <div class="ibiz-group-content">
+                <ibiz-group-card :data="cardItems" text="label" value="id" groupName="group" :multiple="multiple" :defaultSelect="cardSelctVal" @select="groupSelect"></ibiz-group-card>
+            </div>
+        </div>
+        <div class="ibiz-group-footer">
+            <el-button size="small" type="primary" @click="onOK">{{$t('app.commonWords.ok')}}</el-button>
+            <el-button size="small" @click="onCancel">{{$t('app.commonWords.cancel')}}</el-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { Subject } from 'rxjs';
+import { Http } from '../../utils';
+@Component({})
+export default class AppMobGroupPicker extends Vue {
+
+    /**
+     * 视图上下文参数
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    @Prop() viewdata: any;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    @Prop() viewparam: any;
+
+    /**
+     * 多选
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    protected multiple: boolean = false;
+
+    /**
+     * 加载树url
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    protected treeurl:any;
+
+    /**
+     * 加载人员url
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    protected url:any;
+
+    /**
+     * 树数据集
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    protected treeItems: any[] = [];
+
+    /**
+     * 分组表数据集
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    protected cardItems: any[] = [];
+
+    /**
+     * 视图上下文参数对象
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    protected viewData: any;
+
+    /**
+     * 视图参数对象
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    protected viewParam: any;
+
+    /**
+     * 树选中值
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    protected treeSelectVal: string = '';
+
+    /**
+     * 分组表选中集合
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    protected cardSelctVal: any = [];
+
+    /**
+     * 数据选中集合
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    protected selects: any[] = [];
+
+    /**
+     * 是否显示树
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    get showTree() {
+        if(this.viewParam) {
+            return this.viewParam.showtree;
+        }
+    }
+
+    /**
+     * 生命周期
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    public created() {
+        if(!this.viewdata || !this.viewparam) {
+            return;
+        }
+        this.viewData = JSON.parse(this.viewdata);
+        this.viewParam = JSON.parse(this.viewparam);
+        this.multiple = this.viewParam.multiple;
+        this.treeurl = this.viewParam.treeurl;
+        this.url = this.viewParam.url;
+        if (this.viewParam.selects) {
+            this.viewParam.selects.forEach((select: any) => {
+                this.selects.push(select);
+                this.cardSelctVal.push(select.id)
+            })
+        }
+        this.load();
+    }
+
+    /**
+     * 加载数据
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    public load() {
+        if(this.showTree) {
+            this.loadTree();
+        } else {
+            this.loadGroupData(this.viewParam.filtervalue);
+        }
+    }
+
+    /**
+     * 加载树数据
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    public loadTree() {
+        let orgid = this.viewParam.filtervalue;
+        let tempTreeUrl: string = '';
+        if(this.viewParam.selectType && Object.is(this.viewParam.selectType,"dept")){
+            tempTreeUrl = this.treeurl.replace('{deptId}',orgid);
+        }else{
+            tempTreeUrl = this.treeurl.replace('${orgid}',orgid);
+        }
+        let get = Http.getInstance().get(tempTreeUrl, true);
+        get.then((response: any) => {
+            if(response.status === 200) {
+                this.treeItems = response.data;
+            }
+        }).catch((error: any) => {
+            console.log(error)
+        })
+    }
+
+    /**
+     * 加载分组表数据
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    public loadGroupData(key: string) {
+        let tempUrl: string = '';
+        if(this.viewParam.selectType && Object.is(this.viewParam.selectType,"dept")){
+            tempUrl = this.url.replace('{deptId}',key);
+        }else{
+            tempUrl = this.url.replace('${selected-orgid}',key);
+        }
+        let get = Http.getInstance().get(tempUrl, true);
+        get.then((response: any) => {
+            if(response.status === 200) {
+                this.cardItems = response.data;
+            }
+        }).catch((error: any) => {
+            console.log(error)
+        })
+    }
+
+    /**
+     * 树选中
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    public treeSelect(event: any) {
+        if(!event || JSON.parse(event).length == 0) {
+            return;
+        }
+        const items: any = JSON.parse(event);
+        this.loadGroupData(items[0].id);
+    }
+
+    /**
+     * 分组表选中
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    public groupSelect(event: any) {
+        if (!event || !event.select) {
+            return;
+        }
+        if(!this.multiple) {
+            this.selects = [];
+        }
+        if(event.rselect) {
+            let index: number = this.selects.findIndex((item: any) => Object.is(event.rselect, item.id));
+            if(index >= 0) {
+                this.selects.splice(index, 1);
+            }
+        } else {
+            event.select.forEach((key: string) => {
+                let index: number = this.selects.findIndex((item: any) => Object.is(key, item.id));
+                if(index >= 0) {
+                    return;
+                }
+                let item: any = this.cardItems.find((item: any) => Object.is(key, item.id));
+                if (item) {
+                    this.selects.push(item);
+                }
+            });
+        }
+    }
+
+    /**
+     * 确认
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    public onOK() {
+        this.$emit('close', this.selects);
+    }
+    
+    /**
+     * 取消
+     *
+     * @type {*}
+     * @memberof AppMobGroupPicker
+     */  
+    public onCancel() {
+        this.$emit('close');
+    }
+}
+</script>
+
+<style lang="less">
+.ibiz-mob-group-picker{
+  width: 100%;
+  height: 100%;
+  .ibiz-group-container {
+      display: flex;
+      height: calc(100% - 65px);
+      .ibiz-group-tree {
+          min-width: 200px;
+          border-right: 1px solid #ddd;
+          padding: 0 34px 0 10px;
+          overflow: auto;
+          height: 100%;
+      }
+      .ibiz-group-content {
+          flex-grow: 1;
+          padding: 0 10px;
+          overflow: auto;
+          height: 100%;
+      }
+  }
+  .ibiz-group-footer {
+      padding: 16px;
+      text-align: right;
+      border-top: 1px solid #ddd;
+  }
+}
+</style>
\ No newline at end of file

src/components/app-mob-group-select/app-mob-group-select.less

+.ibiz-mob-group-select {
+    width: 100%;
+    display: flex;
+    border: 1px solid #DCDFE6;
+    height: 32px;
+    border-radius: 4px;
+    .ibiz-group-content {
+        flex-grow: 1;
+        height: 32px;
+        .group-item-text{
+            padding-left: 15px;
+            font-size: 13px;
+        }
+        .ibiz-group-item {
+            display: inline-block;
+            border: 1px solid #bbb;
+            border-radius: 5px;
+            font-size: 12px;
+            height: 24px;
+            line-height: 22px;
+            margin: 2px 0px 2px 6px;
+            padding: 1px 3px 0 8px;
+            background-color: #f4f4f5;
+            border-color: #e9e9eb;
+            color: #909399;
+            .group-item-multiple{
+                margin: 0 8px 0 0;
+            }
+            .el-icon-close{
+                color: #909399;
+                background-color: #c0c4cc;
+                border-radius: 50%;
+                top: 0;
+            }
+            .el-icon-close:hover{
+                color: #fff;
+                background-color: #909399;
+            }
+        }
+    }
+    .ibiz-group-open {
+        display: flex;
+        text-align: center;
+        align-items: center;
+        padding: 0 5px;
+    }
+}
+.ibiz-mob-group-select:hover {
+    border-color: #108cee;
+}
\ No newline at end of file

src/components/app-mob-group-select/app-mob-group-select.vue

+<template>
+    <div class="ibiz-mob-group-select">
+        <div class="ibiz-group-content">
+            <span class="group-item-text" v-if="!multiple">
+                {{ selectName }}
+            </span>
+            <template v-else v-for="(select, index) of selects">
+                <div :key="index" class="ibiz-group-item">
+                    <span class="group-item-multiple">{{ select.label }}</span>
+                    <i v-if="!disabled" class="el-icon-close" @click="remove(select)"></i>
+                </div>
+            </template>
+        </div>
+        <div v-if="!disabled" class="ibiz-group-open">
+            <i v-if="!disabled && !multiple && selects.length > 0" class="el-icon-close" @click="remove(selects[0])"></i>
+            <i class="el-icon-search" @click="openView" style="color: #c0c4cc;"></i>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { Subject } from 'rxjs';
+import CodeListService from "@/codelist/codelist-service";
+
+@Component({})
+export default class AppMobGroupSelect extends Vue {
+    /**
+     * 名称标识
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop() name!: string;
+
+    /**
+     * 树加载地址
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop() treeurl?:boolean;
+
+    /**
+     * 数据接口地址
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop() url!: string;
+
+    /**
+     * 多选
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop({default: false}) multiple?: boolean;
+
+    /**
+     * 数据对象
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop() data: any;
+
+    /**
+     * 代码表标识
+     * 
+     * @memberof AppMobGroupSelect
+     */
+    @Prop() public tag?:string;
+
+    /**
+     * 代码表类型
+     * 
+     * @memberof AppMobGroupSelect
+     */
+    @Prop() public codelistType?:string;
+
+    /**
+     * 过滤属性标识
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop() filter?: string;
+
+    /**
+     * 是否启用
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop() disabled?: boolean;
+
+    /**
+     * 值
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop() value: any;
+
+    /**
+     * 上下文参数
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop() context: any;
+
+    /**
+     * 关联属性
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop() valueitem: any;
+
+    /**
+     * 填充属性
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Prop() fillmap: any;
+
+    /**
+     * 选中项集合
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    protected selects: any[] = [];
+
+    /**
+     * 值变化
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    @Watch('data',{immediate:true,deep:true})
+    onValueChange(newVal: any, oldVal: any) {
+        this.selects = [];
+        if (newVal) {
+            let item: any = {};
+            item.label = this.data[this.name]?this.data[this.name].split(','):[];
+            item.id = this.data[this.valueitem] ? this.data[this.valueitem].split(',') : [];
+            if(this.fillmap) {
+                for(let key in this.fillmap) {
+                    item[this.fillmap[key]] = this.data[key] ? this.data[key].split(',') : [];
+                }
+            }
+            const callback:any = (item:any) =>{
+                item.label.forEach((val: string, index: number) => {
+                    let _item: any = {};
+                    for(let key in item) {
+                        _item[key] = item[key][index] ? item[key][index] : null;
+                    }
+                    this.selects.push(_item)
+                })
+            }
+            if(item.label.length == 0 && item.id.length > 0){
+                this.fillLabel(item,item.id,(result:any) =>{
+                    item.label = result.label;
+                    callback(item);
+                });
+            }else{
+                callback(item);
+            }
+            
+        }
+    }
+
+    /**
+     * 单选时选中名称
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    get selectName() {
+        if(this.selects.length > 0) {
+            return this.selects[0].label;
+        }
+    }
+
+    /**
+     * 打开选择视图
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    public openView() {
+        const view: any = {
+            viewname: 'app-group-picker',
+            title: (this.$t('components.AppMobGroupSelect.groupSelect') as string)
+        };
+        const context: any = JSON.parse(JSON.stringify(this.context));
+        let filtervalue:string = "";
+        if(this.filter){
+            if(this.data[this.filter]){
+                filtervalue = this.data[this.filter];
+            }else if(context[this.filter]){
+                filtervalue = context[this.filter];
+            }else{
+                filtervalue = context.srforgid;
+            }
+        }else{
+            filtervalue = context.srforgid;
+        }
+        const param: any = {};
+        Object.assign(param, {
+            showtree: this.treeurl?true:false,
+            url:this.url,
+            treeurl:this.treeurl,
+            filtervalue: filtervalue,
+            multiple: this.multiple,
+            selects: this.selects,
+        });
+        let container: Subject<any> = this.$appmodal.openModal(view, context, param);
+        container.subscribe((result: any) => {
+            if (!result || !Object.is(result.ret, 'OK')) {
+                return;
+            }
+            this.openViewClose(result);
+        });
+    }
+
+    /**
+     * 选择视图关闭
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    public openViewClose(result: any) {
+        this.selects = [];
+        if (result.datas && result.datas.length > 0) {
+            this.selects = result.datas
+        }
+        this.setValue()
+    }
+
+    /**
+     * 数据删除
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    public remove(item: any) {
+        this.selects.splice(this.selects.indexOf(item), 1);
+        this.setValue()
+    }
+
+    /**
+     * 设置值
+     *
+     * @type {*}
+     * @memberof AppMobGroupSelect
+     */  
+    public setValue() {
+        let item: any = {};
+        item[this.name] = null;
+        if(this.valueitem) {
+            item[this.valueitem] = null;
+        }
+        if(this.fillmap) {
+            for(let key in this.fillmap) {
+                item[key] = null;
+            }
+        }
+        if(this.multiple) {
+            this.selects.forEach((select: any) => {
+                item[this.name] = item[this.name] ? `${item[this.name]},${select.label}` : select.label;
+                if(this.valueitem) {
+                    item[this.valueitem] = item[this.valueitem] ? `${item[this.valueitem]},${select.id}` : select.id;
+                }
+                if(this.fillmap) {
+                    for(let key in this.fillmap) {
+                        item[key] = item[key] ? `${item[key]},${select[this.fillmap[key]]}` : select[this.fillmap[key]];
+                    }
+                }
+            });
+        } else {
+            item[this.name] = this.selects.length > 0 ? this.selects[0].label : null;
+            if(this.valueitem) {
+                item[this.valueitem] = this.selects.length > 0 ? this.selects[0].id : null;
+            }
+            if(this.fillmap) {
+                for(let key in this.fillmap) {
+                    item[key] = this.selects.length > 0 ? this.selects[0][this.fillmap[key]] : null;
+                }
+            }
+        }
+        for(let key in item) {
+            this.$emit('formitemvaluechange', { name: key, value: item[key] });
+        }
+    }
+
+    /**
+     * 填充label
+     * 
+     * @memberof AppMobGroupSelect
+     */
+    public fillLabel(tempObject:any,valueItem:Array<any>,callback:any){
+        if(tempObject.label.length === 0 && tempObject.id.length >0 && 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 && valueItem.length >0){
+            let tempLabel:Array<any> = [];
+            valueItem.forEach((value:any) =>{
+                let result:any = items.find((item:any) =>{
+                    return item.id === value;
+                })
+                tempLabel.push(result.label);
+            })
+            Object.assign(tempObject,{label:tempLabel});
+            }
+            callback(tempObject);
+        }).catch((error:any) =>{
+            console.log(error);
+        })
+        }
+    }
+  
+}
+</script>
+
+<style lang="less">
+@import './app-group-select.less';
+</style>
\ No newline at end of file

src/components/app-mob-org-select/app-mob-org-select.less

+.app-mob-org-select {
+    width: 100%;
+    .el-input__inner{
+        height: 32px !important;
+        line-height: 32px !important;
+    }
+    .el-input__icon{
+        line-height: 32px;
+    }
+}
\ No newline at end of file

src/components/app-mob-org-select/app-mob-org-select.vue

+<template>
+  <div class="app-mob-org-select">
+    <ibiz-select-tree :NodesData="NodesData" v-model="selectTreeValue" :disabled="disabled" :multiple="multiple" @select="treeSelectChange"></ibiz-select-tree>
+  </div>
+</template>
+<script lang = 'ts'>
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
+import { Http } from '@/utils';
+import CodeListService from "@/codelist/codelist-service";
+import { observable } from 'rxjs';
+@Component({})
+export default class AppMobOrgSelect extends Vue {
+
+  /**
+   * 表单数据
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  @Prop() public data!:any;
+
+  /**
+   * 上下文
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  @Prop() public context!:any;
+
+  /**
+   * 填充对象
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  @Prop() public fillMap:any;
+
+  /**
+   * 过滤项
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  @Prop() public filter?:string;
+
+  /**
+   * 代码表标识
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  @Prop() public tag?:string;
+
+  /**
+   * 代码表类型
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  @Prop() public codelistType?:string;
+
+  /**
+   * 是否多选
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  @Prop({default:false}) public multiple?:boolean;
+
+  /**
+   * 是否禁用
+   *
+   * @type {*}
+   * @memberof AppDepartmentSelect
+   */
+  @Prop({default:false}) public disabled?: boolean;
+
+  /**
+   * 查询单位路径
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  @Prop() public url!:string;
+
+  /**
+   * 监听表单数据变化
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  @Watch('data',{immediate:true,deep:true})
+  onDataChange(newVal: any, oldVal: any) {
+    if(newVal){
+      this.computedSelectedData();
+      if(this.filter){
+        let tempFilterValue:any = this.initBasicData();
+        // filter值变化才去请求数据
+        if(tempFilterValue && (this.copyFilterValue !== tempFilterValue)){
+          this.loadTreeData(this.url.replace('${orgid}',tempFilterValue));
+          this.copyFilterValue = tempFilterValue;
+        }
+      }
+    }
+  }
+
+  /**
+   * 选择值
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  public selectTreeValue:any = "";
+
+  /**
+   * 树节点数据
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  public NodesData:any = [];
+
+  /**
+   * 备份过滤值
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  public copyFilterValue:any;
+
+  /**
+   * vue生命周期
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  public created(){
+    if(!this.filter){
+      this.loadTreeData(this.url);
+    }
+  }
+
+  /**
+   * 加载树数据
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  public initBasicData(){
+    // 计算出过滤值
+    if(this.filter){
+      if(this.data && this.data[this.filter]){
+        return this.data[this.filter];
+      }else if(this.context && this.context[this.filter]){
+        return this.context[this.filter];
+      }else{
+        return null;
+      }
+    }
+  }
+
+  /**
+   * 计算选中值
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  public computedSelectedData(){
+    // 单选
+    if(!this.multiple){
+      if(this.fillMap && Object.keys(this.fillMap).length >0){
+        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]);
+        }
+      }
+    }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});
+              }
+            })
+          }
+        })
+        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);
+        }
+      }
+    }
+  }
+
+  /**
+   * 加载树数据
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  public loadTreeData(requestUrl:string){
+    if(this.filter){
+      const result:any = this.$store.getters.getOrgData(this.filter);
+      if(result){
+        this.NodesData = result;
+        return;
+      }
+    }
+    Http.getInstance().get(requestUrl).then((res:any) =>{
+      if(!res.status && res.status !== 200){
+        console.error((this.$t('components.AppMobOrgSelect.loadFail') as string));
+        return;
+      }
+      this.NodesData = res.data;
+      if(this.filter){
+        this.$store.commit('addOrgData', { srfkey: this.filter, orgData: res.data });
+      }
+    })
+  }
+
+  /**
+   * 树选择触发事件
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  public treeSelectChange($event:any){
+    // 多选
+    if(this.multiple){
+      if(!Object.is($event,'[]')){
+        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]}`;
+            })
+            setTimeout(() => {
+              this.emitValue(this.fillMap[item],tempResult);
+            }, 0);
+          })
+        }
+      }else{
+        if(this.fillMap && Object.keys(this.fillMap).length >0){
+          Object.keys(this.fillMap).forEach((item:any) =>{
+            this.emitValue(this.fillMap[item],null);
+          })
+        }
+      }
+    }else{
+      // 单选
+      if(!Object.is($event,'[]')){
+        const tempValue:any = JSON.parse($event)[0];
+        if(this.fillMap && Object.keys(this.fillMap).length >0){
+          Object.keys(this.fillMap).forEach((item:any) =>{
+            setTimeout(() => {
+              this.emitValue(this.fillMap[item],tempValue[item]);
+            }, 0);
+          })
+        }
+      }else{
+        if(this.fillMap && Object.keys(this.fillMap).length >0){
+          Object.keys(this.fillMap).forEach((item:any) =>{
+            this.emitValue(this.fillMap[item],null);
+          })
+        }
+      }
+    }
+  }
+
+  /**
+   * 抛值
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  public emitValue(name:string,value:any){
+    this.$emit('select-change',{name:name,value:value});
+  }
+
+  /**
+   * 填充label
+   * 
+   * @memberof AppMobOrgSelect
+   */
+  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);
+      })
+    }
+  }
+
+}
+</script>
+
+<style lang="less">
+@import "./app-mob-org-select.less";
+</style>
\ No newline at end of file

src/store/getters.ts

@@ -87,6 +87,25 @@ export const getSearchformStatus = (state: any) => {
     return state.searchformStatus;
   }
 
+/** 获取单位数据
+  * 
+  * @param state 
+  */
+ 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;
+ }
+
 /**
  * 获取部门成员
  * 

src/store/mutations.ts

@@ -303,6 +303,30 @@ export const setSearchformStatus = (state: any, val: any) => {
   state.searchformStatus = val;
 }
 
+/**
+ * 添加单位数据
+ * 
+ * @param state 
+ * @param args 
+ */
+export const addOrgData = (state: any, args: {srfkey: string,orgData: any}) => {
+    if(args && args.srfkey && args.orgData){
+        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));
+    }
+}
+
 /**
  * 添加部门成员
  * 

src/store/state.ts

@@ -19,5 +19,7 @@ export const rootstate: any = {
     selectNaviStyle:'',
     popupStatus:true,
     searchformStatus:false,
+    orgDataMap:{},
+    depDataMap:{},
     departmentPersonnel:[],
 }
\ No newline at end of file