app-group-picker.vue

<template>
    <div class="app-group-picker">
        <div class="app-group-picker__content">
            <div v-if="showTree" class="app-group-picker__content__select-tree">
                <app-select-tree :NodesData="treeItems" v-model="treeSelectVal" :treeOnly="true" :defaultChecked="true" @select="treeSelect"></app-select-tree>
            </div>
            <div class="app-group-picker__content__card">
                <ibiz-group-card :data="cardItems" text="label" value="id" groupName="group" :multiple="multiple" :defaultSelect="cardSelctVal" @select="groupSelect"></ibiz-group-card>
            </div>
        </div>
        <div class="app-group-picker__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 } from 'vue-property-decorator';
import { LogUtil } from 'ibiz-core';
import axios from 'axios';

@Component({})
export default class AppGroupPicker extends Vue {

    /**
     * 动态参数
     * 
     * @memberof AppGroupPicker
     */
    @Prop() dynamicProps?:any;

    /**
     * 请求方式
     *
     * @type {stinr}
     * @memberof AppGroupSelect
     */ 
    public requestMode: 'get' | 'post' | 'delete' | 'put' = 'get';

    /**
     * 多选
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    protected multiple: boolean = false;

    /**
     * 加载树url
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    protected treeurl:any;

    /**
     * 加载人员url
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    protected url:any;

    /**
     * 树数据集
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    protected treeItems: any[] = [];

    /**
     * 分组表数据集
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    protected cardItems: any[] = [];

    /**
     * 视图上下文参数对象
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    protected viewData: any;

    /**
     * 视图参数对象
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    protected viewParam: any;

    /**
     * 树选中值
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    protected treeSelectVal: string = '';

    /**
     * 分组表选中集合
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    protected cardSelctVal: any = [];

    /**
     * 数据选中集合
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    protected selects: any[] = [];

    /**
     * 是否显示树
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    get showTree() {
        if(this.viewParam) {
            return this.viewParam.showtree;
        }
    }

    /**
     * 生命周期
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    public created() {
        if(!this.dynamicProps?.viewdata || !this.dynamicProps?.viewparam) {
            return;
        }
        this.viewData = JSON.parse(this.dynamicProps.viewdata);
        this.viewParam = JSON.parse(this.dynamicProps.viewparam);
        this.multiple = this.viewParam.multiple;
        this.treeurl = this.viewParam.treeurl;
        this.url = this.viewParam.url;
        this.requestMode = this.viewParam.requestMode;
        if (this.viewParam.selects) {
            this.viewParam.selects.forEach((select: any) => {
                this.selects.push(select);
                this.cardSelctVal.push(select.id)
            })
        }
        this.load();
    }

    /**
     * 加载数据
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    public load() {
        if(this.showTree) {
            this.loadTree();
        } else {
            this.loadGroupData(this.viewParam.filtervalue);
        }
    }

    /**
     * 加载树数据
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    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);
        }
        axios({method: this.requestMode, url: tempTreeUrl, data: {}}).then((response: any) => {
            if(response.status === 200) {
                this.treeItems = response.data;
            }
        }).catch((error: any) => {
            LogUtil.log(error)
        })
    }

    /**
     * 加载分组表数据
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    public loadGroupData(key: string) {
        let tempUrl: string = '';
        if(this.viewParam.selectType && Object.is(this.viewParam.selectType,"dept")){
            tempUrl = this.url.replace('{deptId}',key);
        }else{
             if(this.url && this.url.indexOf('{deptId}') !== -1){
                tempUrl = this.url.replace('{deptId}',key);
            }else{
                tempUrl = this.url.replace('${selected-orgid}',key);
            }
        }
        axios({method: this.requestMode, url: tempUrl, data: {}}).then((response: any) => {
            if(response.status === 200) {
                this.cardItems = response.data;
            }
        }).catch((error: any) => {
            LogUtil.log(error)
        })
    }

    /**
     * 树选中
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    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 AppGroupPicker
     */  
    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 AppGroupPicker
     */  
    public onOK() {
        this.$emit('close', this.selects);
    }
    
    /**
     * 取消
     *
     * @type {*}
     * @memberof AppGroupPicker
     */  
    public onCancel() {
        this.$emit('close');
    }
}
</script>