人员选择器

src/app-register.ts

@@ -88,7 +88,7 @@ import CronEditor from './components/cron-editor/cron-editor.vue'
 import AppMessagePopover from './components/app-message-popover/app-message-popover.vue'
 import AppPanelField from './components/app-panel-field/app-panel-field.vue'
 import AppPanelItem from './components/app-panel-item/app-panel-item.vue'
-
+import AppDepartmentPersonnel from './components/app-department-personnel/app-department-personnel.vue'
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -114,6 +114,7 @@ export const AppComponents = {
         v.prototype.$verify = Verify;
         v.prototype.$viewTool = ViewTool;
         v.prototype.$uiActionTool = UIActionTool;
+        v.component('app-department-personnel',AppDepartmentPersonnel);
         v.component('app-panel-item',AppPanelItem);
         v.component('app-panel-field',AppPanelField);
         v.component('app-full-scren',AppFullScren);

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

+<template>
+    <div class="app-department-personnel">
+        <i-select :multiple="multiple" :transfer="true" transfer-class-name="app-department-personnel-select" v-model="selectsLabel" :disabled="disabled" :clearable="true" @on-open-change="onClick" @on-change="change">
+            <i-option v-for="(item, index) in items" :key="index" :value="item.value" :label="item.label">
+                {{item.label}}
+            </i-option>
+        </i-select>
+        <template>
+            <i v-if="!disabled" class="el-icon-search" @click="openView"></i>
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { Subject } from 'rxjs';
+import { Http } from '../../utils';
+import CodeListService from '@/service/app/codelist-service';
+
+@Component({})
+export default class AppDepartmentPersonnel extends Vue {
+
+    /**
+     * 名称标识
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop() public name!: string;
+
+    /**
+     * 树加载地址
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop() public treeurl?: boolean;
+
+    /**
+     * 数据接口地址
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop() public url!: string;
+
+    /**
+     * 多选
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop({default: false}) public multiple?: boolean;
+
+    /**
+     * 数据对象
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop() public data: any;
+
+    /**
+     * 代码表标识
+     * 
+     * @memberof AppDepartmentPersonnel
+     */
+    @Prop() public tag?: string;
+
+    /**
+     * 代码表类型
+     * 
+     * @memberof AppDepartmentPersonnel
+     */
+    @Prop() public codelistType?: string;
+
+    /**
+     * 过滤属性标识
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop() public filter?: string;
+
+    /**
+     * 是否启用
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop() public disabled?: boolean;
+
+    /**
+     * 值
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop() public value: any;
+
+    /**
+     * 上下文参数
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop() public context: any;
+
+    /**
+     * 关联属性
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop() public valueitem: any;
+
+    /**
+     * 填充属性
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    @Prop() public fillmap: any;
+
+    /**
+     * 选中项对象集合
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    public selects: any[] = [ {
+                        value: 'New York',
+                        label: 'New York'
+                    } ];
+
+    /**
+     * 选中项label集合
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    public selectsLabel: any =  ["New York"] ;
+
+    /**
+     * 下拉数组
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    public items: any[] = [{
+                        value: 'New York',
+                        label: 'New York'
+                    },
+                    {
+                        value: 'London',
+                        label: 'London'
+                    },
+                    {
+                        value: 'Sydney',
+                        label: 'Sydney'
+                    },
+                    {
+                        value: 'Ottawa',
+                        label: 'Ottawa'
+                    },
+                    {
+                        value: 'Paris',
+                        label: 'Paris'
+                    },
+                    {
+                        value: 'Canberra',
+                        label: 'Canberra'
+                    }];
+    /**
+     * 过滤值
+     *
+     * @type {string}
+     * @memberof AppDepartmentPersonnel
+     */
+    public filtervalue: string = '';
+
+    /**
+     * 获取需要过滤的部门id
+     * 
+     * @memberof AppDepartmentPersonnel
+     */
+    public getDepertmentId(){
+        const context: any = JSON.parse(JSON.stringify(this.context));
+        if(this.filter){
+            if(this.data[this.filter]){
+                this.filtervalue = this.data[this.filter];
+            }else if(context[this.filter]){
+                this.filtervalue = context[this.filter];
+            }else{
+                this.filtervalue = context.srfpdept;
+            }
+        }else{
+            this.filtervalue = context.srfpdept;
+        } 
+    }
+
+    /**
+     * 展开下拉选择框
+     *
+     * @param {*} $event
+     * @memberof AppDepartmentPersonnel
+     */
+    public onClick($event:any){
+        if($event === true){
+            const items: Array<any> = this.$store.getters.getDepartmentPersonnel();
+            if(items.length > 0){
+                this.items = items;
+            }else{
+                this.getDepertmentId();
+                let tempUrl = this.url.replace('{deptId}',this.filtervalue);
+                let get = Http.getInstance().get(tempUrl, true);
+                get.then((response: any) => {
+                    if(response.status === 200) {
+                        this.items = response.data;
+                        this.$store.commit("addDepartmentPersonnel",this.items);
+                    }
+                }).catch((error: any) => {
+                        console.log(error)
+                })
+            }
+        } 
+    }
+
+    /**
+     * 值变化
+     *
+     * @type {*}
+     * @memberof AppGroupSelect
+     */  
+    @Watch('data',{immediate:true,deep:true})
+    onValueChange(newVal: any, oldVal: any) {
+        this.selects = [];
+        this.selectsLabel = [];
+        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);
+                    this.selectsLabel.push(_item.label);
+                })
+            }
+            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);
+            }
+        }
+    }
+
+    /**
+     * 填充label
+     * 
+     * @memberof AppDepartmentPersonnel
+     */
+    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);
+        })
+        }
+    }
+
+    /**
+     * 打开选择视图
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    public openView() {
+        const view: any = {
+            viewname: 'app-group-picker',
+            title: (this.$t('components.appGroupSelect.groupSelect') as string)
+        };
+        const context: any = JSON.parse(JSON.stringify(this.context));
+        this.getDepertmentId();
+        const param: any = {};
+        Object.assign(param, {
+            showtree: this.treeurl?true:false,
+            url:this.url,
+            treeurl:this.treeurl,
+            filtervalue: this.filtervalue,
+            multiple: this.multiple,
+            selects: this.selects,
+            selectType: 'dept',
+        });
+        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 AppDepartmentPersonnel
+     */  
+    public openViewClose(result: any) {
+        this.selects = [];
+        this.selectsLabel = [];
+        if (result.datas && result.datas.length > 0) {
+            this.selects = result.datas;
+            if(this.selects.length > 0){
+                this.selects.forEach((select: any)=>{
+                    this.selectsLabel.push(select.label)
+                })
+            }
+        }
+        this.setValue();
+    }
+
+    /**
+     * 选中项发生变化时
+     *
+     * @type {*}
+     * @memberof AppDepartmentPersonnel
+     */  
+    public change($event: any) {
+        this.selects = [];
+        if(this.multiple){
+            if($event.length > 0){
+                $event.forEach((select: any)=>{
+                    let index = this.items.findIndex((item) => Object.is(item.label, select));
+                    if (index >= 0) {
+                        this.selects.push(this.items[index]);
+                    }
+                });
+            }
+        }else{
+            let index = this.items.findIndex((item) => Object.is(item.label, $event));
+            if (index >= 0) {
+                this.selects.push(this.items[index]);
+            }
+        }
+        this.setValue();
+    }
+
+    /**
+     * 设置值
+     *
+     * @type {*}
+     * @memberof AppGroupSelect
+     */  
+    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] });
+        }
+    }
+}
+
+</script>
+<style lang="less">
+.app-department-personnel{
+    position: relative;
+    .el-icon-search{
+        position: absolute;
+        top: 10px;
+        right: 27px;
+        color: #c0c4cc;
+    }
+}
+</style>
\ No newline at end of file

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

@@ -176,7 +176,12 @@ export default class AppGroupPicker extends Vue {
      */  
     public loadTree() {
         let orgid = this.viewParam.filtervalue;
-        let tempTreeUrl:string = this.treeurl.replace('${orgid}',orgid);
+        let tempTreeUrl: string = '';
+        if( this.viewParam.selectTyep == 'org'){
+            tempTreeUrl = this.treeurl.replace('${orgid}',orgid);
+        }else if(this.viewParam.selectTyep == 'dept'){
+            tempTreeUrl = this.treeurl.replace('{deptId}',orgid);
+        }
         let get = Http.getInstance().get(tempTreeUrl, true);
         get.then((response: any) => {
             if(response.status === 200) {
@@ -194,7 +199,12 @@ export default class AppGroupPicker extends Vue {
      * @memberof AppGroupPicker
      */  
     public loadGroupData(key: string) {
-        let tempUrl = this.url.replace('${selected-orgid}',key);
+        let tempUrl: string = '';
+        if( Object.is(this.viewParam.selectType,"org")){
+            tempUrl = this.url.replace('${selected-orgid}',key);
+        }else if(Object.is(this.viewParam.selectType,"dept")){
+            tempUrl = this.url.replace('{deptId}',key);
+        }
         let get = Http.getInstance().get(tempUrl, true);
         get.then((response: any) => {
             if(response.status === 200) {

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

@@ -147,9 +147,7 @@ export default class AppGroupSelect extends Vue {
         if (newVal) {
             let item: any = {};
             item.label = this.data[this.name]?this.data[this.name].split(','):[];
-            if(this.valueitem) {
-                item.id = this.data[this.valueitem] ? this.data[this.valueitem].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(',') : [];
@@ -219,7 +217,8 @@ export default class AppGroupSelect extends Vue {
             treeurl:this.treeurl,
             filtervalue: filtervalue,
             multiple: this.multiple,
-            selects: this.selects
+            selects: this.selects,
+            selectTpye: 'org'
         });
         let container: Subject<any> = this.$appmodal.openModal(view, context, param);
         container.subscribe((result: any) => {

src/store/getters.ts

+/**
+ * 获取代码表对象
+ * 
+ * @param state 
+ */
+export const getDepartmentPersonnel = (state: any) => () => {
+    return state.departmentPersonnel;
+}
+
 /**
  * 获取代码表对象
  * 

src/store/mutations.ts

 import { Environment } from '@/environments/environment';
 
+/**
+ * 添加部门成员
+ * 
+ * @param state 
+ * @param codelists 
+ */
+export const addDepartmentPersonnel = (state: any, departmentPersonnel: Array<any>) => {
+    state.departmentPersonnel = [];
+    state.departmentPersonnel = [...departmentPersonnel];
+}
+
 /**
  * 添加代码表
  * 
@@ -98,10 +109,7 @@ export const addPage = (state: any, arg: any) => {
     if (!arg) {
         return;
     }
-    // 视图类型为REDIRECTVIEW和NOTAB的视图不添加缓存
-    if(Object.is(arg.meta.viewType, 'REDIRECTVIEW') || Object.is(arg.meta.viewType, 'NOTAB')){
-        return;
-    }else if(Object.is(arg.meta.viewType, 'APPINDEX')) {
+    if (Object.is(arg.meta.viewType, 'APPINDEX')) {
         window.sessionStorage.setItem(Environment.AppName, arg.fullPath);
     } else {
         const page: any = {};

src/store/state.ts

@@ -7,6 +7,7 @@ export const rootstate: any = {
     pageMetas: [],
     historyPathList: [],
     codelists: [],
+    departmentPersonnel:[],
     selectTheme: '',
     selectFont: '',
     appdata: '',