app-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 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"></i>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';

@Component({})
export default class AppGroupSelect extends Vue {
    /**
     * 名称标识
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop() name!: string;

    /**
     * 树加载地址
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop() treeurl?:boolean;

    /**
     * 数据接口地址
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop() url!: string;

    /**
     * 多选
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop({default: false}) multiple?: boolean;

    /**
     * 数据对象
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop() data: any;

    /**
     * 过滤属性标识
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop() filter?: string;

    /**
     * 是否启用
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop() disabled?: boolean;

    /**
     * 值
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop() value: any;

    /**
     * 上下文参数
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop() context: any;

    /**
     * 关联属性
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop() valueitem: any;

    /**
     * 填充属性
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Prop() fillmap: any;

    /**
     * 选中项集合
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    protected selects: any[] = [];

    /**
     * 值变化
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    @Watch('value')
    onValueChange(newVal: any) {
        this.selects = [];
        if (newVal) {
            let item: any = {};
            item.label = newVal.split(',');
            if(this.valueitem) {
                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(',') : [];
                }
            }
            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)
            })
        }
    }

    /**
     * 单选时选中名称
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    get selectName() {
        if(this.selects.length > 0) {
            return this.selects[0].label;
        }
    }

    /**
     * 打开选择视图
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    public openView() {
        const view: any = {
            viewname: 'app-group-picker',
            title: '分组选择'
        };
        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 AppGroupSelect
     */  
    public openViewClose(result: any) {
        this.selects = [];
        if (result.datas && result.datas.length > 0) {
            this.selects = result.datas
        }
        this.setValue()
    }

    /**
     * 数据删除
     *
     * @type {*}
     * @memberof AppGroupSelect
     */  
    public remove(item: any) {
        this.selects.splice(this.selects.indexOf(item), 1);
        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.selects.length > 0 ? this.selects[0] : {};
            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">
.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 {
        display: flex;
        text-align: center;
        align-items: center;
        padding: 0 5px;
    }
}
.ibiz-group-select:hover {
    border-color: #108cee;
}
</style>