<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.ibizorder.ordertreegrid_treegridex.nodata')}}
</template>
<el-table-column show-overflow-tooltip prop="name" label="名称" :width="280" :align="''">
<template v-slot="{ row }">
<span>{{ getColumnValue(row, 'name') }}</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="datakey" label="标识" :width="280" :align="''">
<template v-slot="{ row }">
<span>{{ getColumnValue(row, 'datakey') }}</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="updatedate" label="更新日期" :width="280" :align="''">
<template v-slot="{ row }">
<span>{{ getColumnValue(row, 'updatedate') }}</span>
</template>
</el-table-column>
</el-table>
</template>
// 基于 @CONTROL/树表格（增强）/CONTROL-BASE.vue.ftl 生成
<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 IBIZOrderEntityService from '@/service/ibizorder/ibizorder-service';
import OrderTreeGridService from './order-tree-grid-treegridex-service';
import IBIZOrderUIService from '@/uiservice/ibizorder/ibizorder-ui-service';
@Component({
components: {
}
})
export default class OrderTreeGridBase extends Vue implements ControlInterface {
/**
* 名称
*
* @type {string}
* @memberof OrderTreeGridBase
*/
@Prop() public name?: string;
/**
* 视图通讯对象
*
* @type {Subject<ViewState>}
* @memberof OrderTreeGridBase
*/
@Prop() public viewState!: Subject<ViewState>;
/**
* 应用上下文
*
* @type {*}
* @memberof OrderTreeGridBase
*/
@Prop() public context!: any;
/**
* 视图参数
*
* @type {*}
* @memberof OrderTreeGridBase
*/
@Prop() public viewparams!: any;
/**
* 视图操作参数(父级)
*
* @type {*}
* @memberof OrderTreeGridBase
*/
@Prop() public pViewCtx!: any;
/**
* 视图操作参数
*
* @type {*}
* @memberof OrderTreeGridBase
*/
public viewCtx: any = {};
/**
* 监听视图操作参数变化
*
* @type {*}
* @memberof OrderTreeGridBase
*/
@Watch('pViewCtx', { immediate: true })
public onViewCtxChange(newVal: any, oldVal: any) {
Object.assign(this.viewCtx, newVal, { xData: this, ctrl: this });
}
/**
* 视图状态事件
*
* @public
* @type {(Subscription | undefined)}
* @memberof OrderTreeGridBase
*/
public viewStateEvent: Subscription | undefined;
/**
* 获取部件类型
*
* @returns {string}
* @memberof OrderTreeGridBase
*/
public getControlType(): string {
return 'TREEGRIDEX'
}
/**
* 计数器服务对象集合
*
* @type {Array<*>}
* @memberof OrderTreeGridBase
*/
public counterServiceArray:Array<any> = [];
/**
* 建构部件服务对象
*
* @type {OrderTreeGridService}
* @memberof OrderTreeGridBase
*/
public service: OrderTreeGridService = new OrderTreeGridService({ $store: this.$store });
/**
* 实体服务对象
*
* @type {IBIZOrderService}
* @memberof OrderTreeGridBase
*/
public appEntityService: IBIZOrderEntityService = new IBIZOrderEntityService({ $store: this.$store });
/**
* 转化数据
*
* @param {any} args
* @memberof OrderTreeGridBase
*/
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 OrderTreeGridBase
*/
public closeView(args: any): void {
let _this: any = this;
_this.$emit('closeview', [args]);
}
/**
* 计数器刷新
*
* @memberof OrderTreeGridBase
*/
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();
}
})
}
}
/**
* 处理部件事件
*
* @memberof OrderTreeGridBase
*/
public async handleCtrlEvents(eventName: string, args: any = {}): Promise<boolean> {
const actionData = {
data: this.getData() || {},
context: Util.deepCopy(this.context),
viewparams: Util.deepCopy(this.viewparams),
xData: this
}
let result: boolean = true;
Object.assign(actionData, args);
if (!result) {
return false;
}
this.$emit(eventName, actionData);
return true;
}
/**
* 显示处理提示
*
* @type {boolean}
* @memberof OrderTreeGridBase
*/
@Prop({ default: true }) public showBusyIndicator?: boolean;
/**
* 部件行为--load
*
* @type {string}
* @memberof OrderTreeGridBase
*/
@Prop() public loadAction!: string;
/**
* 是否单选
*
* @type {boolean}
* @memberof OrderTreeGridBase
*/
@Prop({ default: true }) public isSingleSelect!: boolean;
/**
* 部件样式名
*
* @public
* @type {any[]}
* @memberof OrderTreeGridBase
*/
public controlClass: string = "treegridex";
/**
* 数据集合
*
* @public
* @type {any[]}
* @memberof OrderTreeGridBase
*/
public items: any[] = [];
/**
* 默认展开节点集合
*
* @memberof OrderTreeGridBase
*/
public defExpands: any = [];
/**
* 行节点下标
*
* @memberof OrderTreeGridBase
*/
public itemNum: any = {};
/**
* 计数下标
*
* @memberof OrderTreeGridBase
*/
public num: number = 0;
/**
* 获取列属性值
*
* @public
* @memberof OrderTreeGridBase
*/
public getColumnValue(task: any, field: string) {
if(Object.is(task.id.split(';')[0], 'orderData')) {
return task[field];
}
if(Object.is(task.id.split(';')[0], 'ROOT')) {
return task[field];
}
if(Object.is(task.id.split(';')[0], 'orderDetailData')) {
return task[field];
}
}
/**
* 获取代码项
*
* @public
* @memberof OrderTreeGridBase
*/
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 OrderTreeGridBase
*/
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 OrderTreeGridBase
*/
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 OrderTreeGridBase
*/
public itemExpand(item: any) {
}
/**
* 刷新
*
* @memberof OrderTreeGridBase
*/
public refresh(args?:any) {
this.load();
}
/**
* 选中的数据
*
* @returns {any[]}
* @memberof OrderTreeGridBase
*/
public selections: any[] = [];
/**
* 获取多项数据
*
* @returns {any[]}
* @memberof OrderTreeGridBase
*/
public getDatas(): any[] {
return this.selections;
}
/**
* 获取单项树
*
* @returns {*}
* @memberof OrderTreeGridBase
*/
public getData(): any {
return this.selections.length > 0 ? this.selections[0] : null;
}
/**
* vue 生命周期
*
* @returns
* @memberof OrderTreeGridBase
*/
public created() {
this.afterCreated();
}
/**
* 执行created后的逻辑
*
* @memberof OrderTreeGridBase
*/
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 OrderTreeGridBase
*/
public setRowClass({row, rowIndex}: {row: any, rowIndex: number}) {
return 'treegrid' + this.itemNum[row.id];
}
/**
* 展开默认节点
*
* @returns
* @memberof OrderTreeGridBase
*/
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 OrderTreeGridBase
*/
public select($event: any) {
if (!$event) {
return;
}
this.selections = [JSON.parse(JSON.stringify($event))];
this.$emit('selectionchange', this.selections);
}
/**
* 打开编辑数据
*
* @returns
* @memberof OrderTreeGridBase
*/
public opendata(args: any) {
if(this.selections.length === 0) {
return;
}
if(Object.is(this.selections[0].id.split(';')[0], 'orderData')) {
}
if(Object.is(this.selections[0].id.split(';')[0], 'ROOT')) {
}
if(Object.is(this.selections[0].id.split(';')[0], 'orderDetailData')) {
}
}
/**
* vue 生命周期
*
* @memberof OrderTreeGridBase
*/
public destroyed() {
this.afterDestroy();
}
/**
* 执行destroyed后的逻辑
*
* @memberof OrderTreeGridBase
*/
public afterDestroy() {
if (this.viewStateEvent) {
this.viewStateEvent.unsubscribe();
}
}
}
</script>
<style lang='less'>
@import './order-tree-grid-treegridex.less';
</style>