tree-table-treegridex-base.vue

<template>
    <el-table ref="treegridex" 
        :data="items" 
        row-key="id" 
        border  
        lazy
        height="100%"  
        :row-class-name="setRowClass" 
        :load="loadTreeNode" 
        :tree-props="{ children: 'children', hasChildren: 'leaf' }"
        :select-on-indeterminate="isSingleSelect"
        :highlight-current-row="isSingleSelect"
        @current-change="select"
        >
        <template slot="empty">
            {{$t('entities.ibizbook.treetable_treegridex.nodata')}}
        </template>
        <el-table-column show-overflow-tooltip prop="author" label="作者" :width="50"  :align="''">
        <template v-slot="{ row }">
            <span>{{ getColumnValue(row, 'author') }}</span>
        </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="subtext" label="图书描述" :width="50"  :align="''">
        <template v-slot="{ row }">
            <span>{{ getColumnValue(row, 'subtext') }}</span>
        </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="ibizbookname" label="图书名称" :width="50"  :align="''">
        <template v-slot="{ row }">
            <span>{{ getColumnValue(row, 'ibizbookname') }}</span>
        </template>
        </el-table-column>
    </el-table>
</template>

<script lang='tsx'>
import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator';
import { CreateElement } from 'vue';
import { Subject, Subscription } from 'rxjs';
import { ControlInterface } from '@/interface/control';
import { UIActionTool,Util,ViewTool } from '@/utils';
import NavDataService from '@/service/app/navdata-service';
import AppCenterService from "@service/app/app-center-service";
import IBIZBOOKService from '@/service/ibizbook/ibizbook-service';
import TreeTableService from './tree-table-treegridex-service';
import IBIZBOOKUIService from '@/uiservice/ibizbook/ibizbook-ui-service';


@Component({
    components: {
      
    }
})
export default class TreeTableBase extends Vue implements ControlInterface {

    /**
     * 名称
     *
     * @type {string}
     * @memberof TreeTableBase
     */
    @Prop() public name?: string;

    /**
     * 视图通讯对象
     *
     * @type {Subject<ViewState>}
     * @memberof TreeTableBase
     */
    @Prop() public viewState!: Subject<ViewState>;

    /**
     * 应用上下文
     *
     * @type {*}
     * @memberof TreeTableBase
     */
    @Prop() public context!: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof TreeTableBase
     */
    @Prop() public viewparams!: any;

    /**
     * 视图状态事件
     *
     * @public
     * @type {(Subscription | undefined)}
     * @memberof TreeTableBase
     */
    public viewStateEvent: Subscription | undefined;

    /**
     * 获取部件类型
     *
     * @returns {string}
     * @memberof TreeTableBase
     */
    public getControlType(): string {
        return 'TREEGRIDEX'
    }



    /**
     * 计数器服务对象集合
     *
     * @type {Array<*>}
     * @memberof TreeTableBase
     */    
    public counterServiceArray:Array<any> = [];

    /**
     * 建构部件服务对象
     *
     * @type {TreeTableService}
     * @memberof TreeTableBase
     */
    public service: TreeTableService = new TreeTableService({ $store: this.$store });

    /**
     * 实体服务对象
     *
     * @type {IBIZBOOKService}
     * @memberof TreeTableBase
     */
    public appEntityService: IBIZBOOKService = new IBIZBOOKService({ $store: this.$store });
    


    /**
     * 转化数据
     *
     * @param {any} args
     * @memberof  TreeTableBase
     */
    public transformData(args: any) {
        let _this: any = this;
        if(_this.service && _this.service.handleRequestData instanceof Function && _this.service.handleRequestData('transform',_this.context,args)){
            return _this.service.handleRequestData('transform',_this.context,args)['data'];
        }
    }

    /**
     * 关闭视图
     *
     * @param {any} args
     * @memberof TreeTableBase
     */
    public closeView(args: any): void {
        let _this: any = this;
        _this.$emit('closeview', [args]);
    }

    /**
     *  计数器刷新
     *
     * @memberof TreeTableBase
     */
    public counterRefresh(){
        const _this:any =this;
        if(_this.counterServiceArray && _this.counterServiceArray.length >0){
            _this.counterServiceArray.forEach((item:any) =>{
                if(item.refreshData && item.refreshData instanceof Function){
                    item.refreshData();
                }
            })
        }
    }



    /**
     * 显示处理提示
     *
     * @type {boolean}
     * @memberof TreeTableBase
     */
    @Prop({ default: true }) public showBusyIndicator?: boolean;

    /**
     * 部件行为--load
     *
     * @type {string}
     * @memberof TreeTableBase
     */
    @Prop() public loadAction!: string;

    /**
     * 是否单选
     *
     * @type {boolean}
     * @memberof TreeTableBase
     */
    @Prop({ default: true }) public isSingleSelect!: boolean;

    /**
     * 部件样式名
     *
     * @public
     * @type {any[]}
     * @memberof TreeTableBase
     */
    public controlClass: string = "treegridex";

    /**
     * 数据集合
     *
     * @public
     * @type {any[]}
     * @memberof TreeTableBase
     */
    public items: any[] = [];

    /**
     * 默认展开节点集合
     *
     * @memberof TreeTableBase
     */
    public defExpands: any = [];

    /**
     * 行节点下标
     *
     * @memberof TreeTableBase
     */
    public itemNum: any = {};

    /**
     * 计数下标
     *
     * @memberof TreeTableBase
     */
    public num: number = 0;

    /**
     * 获取列属性值
     *
     * @public
     * @memberof TreeTableBase
     */
    public getColumnValue(task: any, field: string) {
        if(Object.is(task.id.split(';')[0], 'ROOT')) {
            return task[field];
        }
        if(Object.is(task.id.split(';')[0], 'top1')) {
            return task[field];
        }
    }

    /**
     * 获取代码项
     *
     * @public
     * @memberof TreeTableBase
     */
    public getCodeListItem(codelist: any, val: any) {
        for(let i = 0; i < codelist.items.length; i++) {
            if(Object.is(codelist.items[i].value, val)) {
                return codelist.items[i].text;
            }
        }
        return codelist.emptytext;
    }

    /**
     * 搜索获取日程事件
     *
     * @param {*} $event 日期信息
     * @memberof TreeTableBase
     */
    public load(task: any = {}, resolve?: any) {
        const params: any = {
            srfnodeid: task && task.id ? task.id : "#",
            srfnodefilter: ''
        };
        let tempViewParams:any = JSON.parse(JSON.stringify(this.viewparams));
        let curNode:any = {}; 
        Util.deepObjectMerge(curNode, task);
        let tempContext:any = this.computecurNodeContext(curNode);
        if(curNode && curNode.srfparentdename) {
            Object.assign(tempContext,{ srfparentdename: curNode.srfparentdename });
            Object.assign(tempViewParams,{ srfparentdename: curNode.srfparentdename });
        }
        if(curNode && curNode.srfparentkey) {
            Object.assign(tempContext,{ srfparentkey: curNode.srfparentkey });
            Object.assign(tempViewParams,{ srfparentkey: curNode.srfparentkey });
        }
        Object.assign(params,{viewparams:tempViewParams});
        this.service.getNodes(tempContext,params).then((response: any) => {
            if (!response || response.status !== 200) {
                this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.info });
                return;
            }
            response.data.forEach((item: any) => {
                this.itemNum[item.id] = this.num++;
                if(!item.collapsed) {
                    this.defExpands.push(item);
                }
            })
            if(resolve && resolve instanceof Function) {
                resolve(response.data);
            } else {
                this.items = [...response.data];
            }
            this.$nextTick(() => {
                this.expandDefNode();
            })
            this.$emit("load", this.items);
        }).catch((response: any) => {
            if (response && response.status === 401) {
                return;
            }
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.info });
        });
    }

    /**
     * 加载节点
     *
     * @memberof TreeTable
     */
    public loadTreeNode(tree: any, treeNode: any, resolve: any) {
        this.load(tree, resolve);
    }

    /**
     * 计算当前节点的上下文
     *
     * @param {*} curNode 当前节点
     * @memberof TreeTableBase
     */
    public computecurNodeContext(curNode:any){
        let tempContext:any = {};
        if(curNode && curNode.data && curNode.data.srfappctx){
            tempContext = JSON.parse(JSON.stringify(curNode.data.srfappctx));
        }else{
            tempContext = JSON.parse(JSON.stringify(this.context));
        }
        return tempContext;
    }

    /**
     * 节点展开
     *
     * @param {*} item 当前节点
     * @memberof TreeTableBase
     */
    public itemExpand(item: any) {

    }

    /**
     * 刷新
     *
     * @memberof TreeTableBase
     */
    public refresh(args?:any) {
        this.load();
    }



    /**
     * 选中的数据
     *
     * @returns {any[]}
     * @memberof TreeTableBase
     */
    public selections: any[] = [];

    /**
     * 获取多项数据
     *
     * @returns {any[]}
     * @memberof TreeTableBase
     */
    public getDatas(): any[] {
        return this.selections;
    }

    /**
     * 获取单项树
     *
     * @returns {*}
     * @memberof TreeTableBase
     */
    public getData(): any {
        return this.selections.length > 0 ? this.selections[0] : null;
    }
             
    /**
     * vue 生命周期
     *
     * @returns
     * @memberof TreeTableBase
     */
    public created() {
        this.afterCreated();
    }

    /**
     * 执行created后的逻辑
     *
     * @memberof TreeTableBase
     */
    public afterCreated() {
        this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
            if (!Object.is(tag, this.name)) {
                return;
            }
            if (Object.is('load', action)) {
                this.load(data);
            }
        });
    }

    /**
     * 设置行Class
     *
     * @returns
     * @memberof TreeTableBase
     */
    public setRowClass({row, rowIndex}: {row: any, rowIndex: number}) {
        return 'treegrid' + this.itemNum[row.id];
    }

    /**
     * 展开默认节点
     *
     * @returns
     * @memberof TreeTableBase
     */
    public expandDefNode() {
        if(this.defExpands.length > 0) {
            let item: any = this.defExpands[0];
            this.defExpands.splice(0, 1);
            let trs: any = this.$el.getElementsByClassName('treegrid' + this.itemNum[item.id]);
            if(trs) {
                let icons: any = trs[0].getElementsByClassName('el-table__expand-icon');
                icons[0].click();
            }
        }
    }

    /**
     * 选中变化
     *
     * @returns
     * @memberof TreeTableBase
     */
    public select($event: any) {
        if (!$event) {
            return;
        }
        this.selections = [JSON.parse(JSON.stringify($event))];
        this.$emit('selectionchange', this.selections);
    }

    /**
     * 打开编辑数据
     *
     * @returns
     * @memberof  TreeTableBase
     */
    public opendata(args: any) {
        if(this.selections.length === 0) {
            return;
        }
        if(Object.is(this.selections[0].id.split(';')[0], 'ROOT')) {
        }
        if(Object.is(this.selections[0].id.split(';')[0], 'top1')) {
        }
    }

    /**
     * vue 生命周期
     *
     * @memberof  TreeTableBase
     */
    public destroyed() {
        this.afterDestroy();
    }

    /**
     * 执行destroyed后的逻辑
     *
     * @memberof  TreeTableBase
     */
    public afterDestroy() {
        if (this.viewStateEvent) {
            this.viewStateEvent.unsubscribe();
        }
    }


}
</script>

<style lang='less'>
@import './tree-table-treegridex.less';
</style>