update

src/app-register.ts

@@ -72,6 +72,9 @@ 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 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;
@@ -153,5 +156,7 @@ export const AppComponents = {
         v.component('app-column-format',AppColumnFormat);
         v.component('app-quick-group',AppQuickGroup);
         v.component('app-org-select',AppOrgSelect);
+        v.component('ibiz-group-select',IBizGroupSelect);
+        v.component('ibiz-group-picker',IBizGroupPicker);
     },
 };
\ No newline at end of file

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

+<template>
+    <div class="ibiz-group-picker">
+        <div class="ibiz-group-container">
+            <div v-if="showTree" class="ibiz-group-tree">
+                <ibiz-select-tree :NodesData="treeItems" v-model="treeSelectVal" :isShowSearchBar="false" @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">确认</el-button>
+            <el-button size="small" @click="onCancel">取消</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 IBizGroupPicker extends Vue {
+
+    /**
+     * 视图上下文参数
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    @Prop() viewdata: any;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    @Prop() viewparam: any;
+
+    /**
+     * 多选
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected multiple: boolean = false;
+
+    /**
+     * 树数据集
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected treeItems: any[] = [];
+
+    /**
+     * 分组表数据集
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected cardItems: any[] = [];
+
+    /**
+     * 视图上下文参数对象
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected viewData: any;
+
+    /**
+     * 视图参数对象
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected viewParam: any;
+
+    /**
+     * 树选中值
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected treeSelectVal: string = '';
+
+    /**
+     * 分组表选中集合
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected cardSelctVal: any = [];
+
+    /**
+     * 数据选中集合
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected selects: any[] = [];
+
+    /**
+     * 是否显示树
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    get showTree() {
+        if(!Object.is(this.viewData.srforgid, this.viewParam.srforgid)) {
+            return true;
+        }
+    }
+
+    /**
+     * 生命周期
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    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;
+        if (this.viewParam.selects) {
+            this.cardSelctVal = this.viewParam.selects;
+        }
+        this.load();
+    }
+
+    /**
+     * 加载数据
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public load() {
+        if(this.showTree) {
+            this.loadTree();
+        } else {
+            this.loadGroupData(this.viewParam.srforgid);
+        }
+    }
+
+    /**
+     * 加载树数据
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public loadTree() {
+        let get = Http.getInstance().get(`/ibzorganizations/450000/suborg/ibzdepartments/picker`, true);
+        get.then((response: any) => {
+            if(response.status === 200) {
+                this.treeItems = response.data;
+            }
+        }).catch((error: any) => {
+            console.log(error)
+        })
+    }
+
+    /**
+     * 加载分组表数据
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public loadGroupData(key: string) {
+        let get = Http.getInstance().get(`/ibzorganizations/${key}/ibzemployees/picker`, true);
+        get.then((response: any) => {
+            if(response.status === 200) {
+                this.cardItems = response.data;
+            }
+        }).catch((error: any) => {
+            console.log(error)
+        })
+    }
+
+    /**
+     * 树选中
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    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 IBizGroupPicker
+     */  
+    public groupSelect(event: any) {
+        // if (!event || !event.selects) {
+        //     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.selects.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);
+        //         }
+        //     });
+        // }
+
+        // 测试 start
+        if(!this.multiple) {
+            this.selects = [];
+        }
+        event.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);
+            }
+        });
+        // 测试 end
+    }
+
+    /**
+     * 确认
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public onOK() {
+        this.$emit('close', this.selects);
+    }
+    
+    /**
+     * 取消
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public onCancel() {
+        this.$emit('close');
+    }
+}
+</script>
+
+<style lang="less">
+.ibiz-group-container {
+    display: flex;
+    height: calc(100% - 65px);
+    .ibiz-group-tree {
+        width: 400px;
+        border-right: 1px solid #ddd;
+        padding: 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/ibiz-group-select/ibiz-group-select.vue

+<template>
+    <div class="ibiz-group-select">
+        <div class="ibiz-group-content">
+            <span v-if="!multiple">
+                {{ selectName }}
+            </span>
+            <template v-else v-for="(select, index) of selects">
+                <div :key="index" class="ibiz-group-item">
+                    {{ select.label }}
+                    <i class="el-icon-close" @click="remove(select)"></i>
+                </div>
+            </template>
+        </div>
+        <div class="ibiz-group-open">
+            <i class="el-icon-search" @click="openView"></i>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { Subject } from 'rxjs';
+
+@Component({})
+export default class IBizGroupSelect extends Vue {
+    /**
+     * 名称标识
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() name!: string;
+
+    /**
+     * 数据接口地址
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() url?: string;
+
+    /**
+     * 多选
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop({default: false}) multiple?: boolean;
+
+    /**
+     * 数据对象
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() data: any;
+
+    /**
+     * 过滤属性标识
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop({default: 'orgid'}) filter?: string;
+
+    /**
+     * 是否启用
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() disabled?: boolean;
+
+    /**
+     * 值
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() value: any;
+
+    /**
+     * 上下文参数
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() context: any;
+
+    /**
+     * 关联属性
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() valueitem: any;
+
+    /**
+     * 选中项集合
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    protected selects: any[] = [];
+
+    /**
+     * 值变化
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Watch('value')
+    onValueChange(newVal: any) {
+        this.selects = [];
+        if (newVal) {
+            let vals: any[] = newVal.split(',');
+            let vals2: any[] = [];
+            if(this.valueitem) {
+                vals2 = this.data[this.valueitem].split(',');
+            }
+            vals.forEach((val: string, index: number) => {
+                this.selects.push({
+                    label: val,
+                    id: vals2.length > 0 ? vals2[index] : null
+                })
+            })
+        }
+    }
+
+    /**
+     * 单选时选中名称
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    get selectName() {
+        if(this.selects.length > 0) {
+            return this.selects[0].label;
+        }
+    }
+
+    /**
+     * 打开选择视图
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    public openView() {
+        const view: any = {
+            viewname: 'ibiz-group-picker',
+            title: '分组选择'
+        };
+        let sels: any = this.selects.map((select: any) => {
+            return select.id;
+        })
+        const context: any = JSON.parse(JSON.stringify(this.context));
+        const param: any = {};
+        let orgid: any = this.filter;
+        Object.assign(param, {
+            orgid: this.data[orgid],
+            multiple: this.multiple,
+            selects: sels
+        });
+        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 IBizGroupSelect
+     */  
+    public openViewClose(result: any) {
+        console.log(result)
+        this.selects = [];
+        if (result.datas && result.datas.length > 0) {
+            result.datas.forEach((data: any) => {
+                this.selects.push({
+                    id: data.id,
+                    label: data.label
+                })
+            });
+        }
+        this.setValue()
+    }
+
+    /**
+     * 数据删除
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    public remove(item: any) {
+        this.selects.splice(this.selects.indexOf(item), 1);
+        this.setValue()
+    }
+
+    /**
+     * 设置值
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    public setValue() {
+        let item: any = {};
+        if(this.multiple) {
+            let label = '';
+            let value = '';
+            this.selects.forEach((select: any) => {
+                label += ',' + select.label;
+                value += ',' + select.id;
+            });
+            Object.assign(item, {
+                label: label ? label.substring(1) : null,
+                id: value ? value.substring(1) : null
+            })
+
+        } else {
+            item = this.selects.length > 0 ? this.selects[0] : {};
+        }
+        if(this.name) {
+            this.$emit('formitemvaluechange', { name: this.name, value: item.label });
+        }
+        if(this.valueitem) {
+            this.$emit('formitemvaluechange', { name: this.valueitem, value: item.id });
+        }
+    } 
+}
+</script>
+
+<style lang="less">
+.ibiz-group-select {
+    width: 100%;
+    display: flex;
+    border: 1px solid #DCDFE6;
+    min-height: 32px;
+    border-radius: 4px;
+    .ibiz-group-content {
+        flex-grow: 1;
+        padding: 0 16px;
+        .ibiz-group-item {
+            display: inline-block;
+            border: 1px solid #bbb;
+            line-height: 24px;
+            border-radius: 5px;
+            margin-right: 5px;
+            padding: 0 5px;
+        }
+    }
+    .ibiz-group-open {
+        width: 20px;
+        display: flex;
+        text-align: center;
+        align-items: center;
+    }
+}
+.ibiz-group-select:hover {
+    border-color: #108cee;
+}
+</style>
\ No newline at end of file