lxm-- 部门选择组件

src/app-register.ts

@@ -72,10 +72,12 @@ import ContextMenu from './components/context-menu/context-menu'
 import AppColumnFormat from './components/app-column-format/app-column-format.vue'
 import AppQuickGroup from './components/app-quick-group/app-quick-group.vue'
 import AppOrgSelect from './components/app-org-select/app-org-select.vue'
+import AppDepartmentSelect from './components/app-department-select/app-department-select.vue'
 import IBizGroupSelect from './components/ibiz-group-select/ibiz-group-select.vue'
 import IBizGroupPicker from './components/ibiz-group-picker/ibiz-group-picker.vue'
 
 
+
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载功能服务注册中心
@@ -156,6 +158,7 @@ export const AppComponents = {
         v.component('app-column-format',AppColumnFormat);
         v.component('app-quick-group',AppQuickGroup);
         v.component('app-org-select',AppOrgSelect);
+        v.component('app-department-select',AppDepartmentSelect);
         v.component('ibiz-group-select',IBizGroupSelect);
         v.component('ibiz-group-picker',IBizGroupPicker);
     },

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

+.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;
+    }
+  }
+}
+

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>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop, Model } from 'vue-property-decorator';
+
+@Component({
+})
+export default class AppDepartmentSelect extends Vue {
+
+    /**
+     * 接口url
+     *
+     * @type {*}
+     * @memberof AppDepartmentSelect
+     */
+    @Prop({default:'/ibzorganizations/{orgid}/ibzdepartments/picker'}) public url?: any;
+
+    /**
+     * 过滤项
+     *
+     * @type {*}
+     * @memberof AppDepartmentSelect
+     */
+    @Prop() public filter?: any;
+
+    /**
+     * 过滤项
+     *
+     * @type {*}
+     * @memberof AppDepartmentSelect
+     */
+    @Prop() public fillMap?: any;
+
+    /**
+     * 是否多选
+     *
+     * @type {*}
+     * @memberof AppDepartmentSelect
+     */
+    @Prop({default:false}) public multiple?: any;
+
+    /**
+     * 表单项名称
+     *
+     * @type {*}
+     * @memberof AppDepartmentSelect
+     */
+    @Prop() public name!: any;
+
+    /**
+     * 表单数据
+     *
+     * @type {*}
+     * @memberof AppDepartmentSelect
+     */
+    @Prop() public data!: any;
+
+    /**
+     * 表单项值
+     *
+     * @type {*}
+     * @memberof AppDepartmentSelect
+     */
+    @Prop() public value!: any;
+
+    /**
+     * 上下文变量
+     *
+     * @type {*}
+     * @memberof AppDepartmentSelect
+     */
+    @Prop() public context!: any;
+
+    /**
+     * 树节点数据
+     *
+     * @type {*}
+     * @memberof AppDepartmentSelect
+     */
+    public Nodesdata: any[] = [];
+
+    /**
+     * 当前树节点数据的url
+     *
+     * @type {*}
+     * @memberof AppDepartmentSelect
+     */
+    public oldurl: any[] = [];
+
+    /**
+     * 获取节点数据
+     *
+     * @memberof AppDepartmentSelect
+     */
+    public searchNodesData(){
+      // 处理请求参数
+      let param = ''
+      if(this.filter){
+          if(this.data && this.data[this.filter]){
+            param= this.data[this.filter];
+          }else if(this.context && this.context[this.filter]){
+            param= this.context[this.filter];
+          }
+      }else{
+          param = this.context.srforgid;
+      }
+      let _url = this.url.replace(/{orgid}/,param)
+      if(this.oldurl === _url){
+          return;
+      }
+      this.$http.get(_url).then((response: any) => {
+          console.log(response)
+          this.Nodesdata = response.data;
+          this.oldurl = _url;
+      }).catch((response: any) => {
+          if (!response || !response.status || !response.data) {
+              this.$Notice.error({ title: '错误', desc: '系统异常！' });
+              return;
+          }
+      });
+    }
+
+    /**
+     * 值变化
+     *
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof AppDepartmentSelect
+     */
+    @Watch('data',{deep:true})
+    public onValueChange(newVal: any, oldVal: any) {
+        this.searchNodesData();
+    }
+
+    /**
+     * select事件处理
+     * 
+     * @param {*} $event
+     * @memberof AppDepartmentSelect
+     */
+    public onSelect($event:any){
+        // 组件自身抛值事件
+        let selectArr = JSON.parse($event);
+        if(selectArr.length === 0){
+            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(",")})
+            });
+        }
+
+    }
+}
+</script>
+
+<style lang='less'>
+@import './app-department-select.less';
+</style>
\ No newline at end of file