import { CreateElement } from 'vue'; import { Emit, Prop, Watch } from 'vue-property-decorator'; import { throttle, Util } from 'ibiz-core'; import { DataViewControlBase } from '../../../widgets'; /** * 数据视图部件基类 * * @export * @class AppDataViewBase * @extends {DataViewControlBase} */ export class AppDataViewBase extends DataViewControlBase { /** * 部件动态参数 * * @memberof AppDataViewBase */ @Prop() public declare dynamicProps: any; /** * 部件静态参数 * * @memberof AppDataViewBase */ @Prop() public declare staticProps: any; /** * 监听动态参数变化 * * @param {*} newVal * @param {*} oldVal * @memberof AppDataViewBase */ @Watch('dynamicProps', { immediate: true, }) public onDynamicPropsChange(newVal: any, oldVal: any) { if (newVal && !Util.isFieldsSame(newVal, oldVal)) { super.onDynamicPropsChange(newVal, oldVal); } } /** * 监听静态参数变化 * * @param {*} newVal * @param {*} oldVal * @memberof AppDataViewBase */ @Watch('staticProps', { immediate: true, }) public onStaticPropsChange(newVal: any, oldVal: any) { if (newVal && !Util.isFieldsSame(newVal, oldVal)) { super.onStaticPropsChange(newVal, oldVal); } } /** * 部件事件 * * @param 抛出参数 * @memberof AppDataViewBase */ @Emit('ctrl-event') public ctrlEvent({ controlname, action, data }: { controlname: string, action: string, data: any }): void { } /** * @description 是否显示回到顶部 * @readonly * @type {boolean} * @memberof AppDataViewBase */ get backTopVisible(): boolean { let visible: boolean = false; const el = document.querySelector(`#${this.controlId}`); if (el) { visible = true; } return visible; } /** * 绘制分组 * * @param {*} h * @return {*} * @memberof AppDataViewBase */ public renderGroup(h: any) { return this.groupData.map((group: any, index: number) => { return ( <el-collapse-item class="app-control-dataview__content__group"> <div slot="title" class="group__title"> <b>{group.group}</b> </div> {this.hasChildrenRender(h, group)} </el-collapse-item> ); }); } /** * 绘制有子成员项 * * @param {*} h * @param {*} group * @return {*} * @memberof AppDataViewBase */ public hasChildrenRender(h: any, group: any) { if (group.children.length > 0) { const { cardColXS, cardColSM, cardColMD, cardColLG } = this.controlInstance; return group.children.map((groupChild: any, index: number) => { return ( <a href={groupChild.starturl}> <i-col xs={cardColXS} sm={cardColSM} md={cardColMD} class="group__content" lg={cardColLG}> {this.renderCard(groupChild)} </i-col> </a> ); }); } else { return ( <div class="group__empty"> {this.$t('app.commonwords.nodata')} </div> ); } } /** * 渲染数据视图项行为 * * @param {*} item * @return {*} * @memberof AppDataViewBase */ public renderDataViewItemAction(item: any) { return Object.keys(this.actionModel).map((key: string) => { if (item[key].visabled) { const action = this.actionModel[key]; return ( <el-button type='text' disabled={item[key].disabled} class="bottom__action" on-click={($event: any) => { this.handleActionClick(item, $event, action, action); }}> {action.showIcon && <i class={[action.cssClass, "bottom__action__icon"]}></i>} <span> {action.showCaption ? this.$tl(action.lanResTag, action?.caption ? action.caption : '') : ''} </span> </el-button> ) } }); } /** * 渲染数据视图项 * * @param {*} item * @return {*} * @memberof AppDataViewBase */ public renderDataViewItem(item: any) { return ( <div class="item__content"> <div class="item__content__top"> <div class="top__title"> <span>{item.srfmajortext}</span> </div> {item.content && <div class="top__description">{item.content}</div>} </div> { this.actionModel && Object.keys(this.actionModel).length > 0 && <div class="item__content__bottom"> {this.renderDataViewItemAction(item)} </div> } </div> ) } /** * 渲染卡片 * * @param {*} item * @return {*} * @memberof AppDataViewBase */ public renderCard(item: any) { const style: any = { width: this.controlInstance.cardWidth > 0 ? `${this.controlInstance.cardWidth}px` : false, height: this.controlInstance.cardHeight > 0 ? `${this.controlInstance.cardHeight}px` : false }; const itemCssName = { "app-control-dataview__content__item": true, "is-active": item.srfchecked === 1 } const itemCss = this.controlInstance.getItemPSSysCss(); if (itemCss) { Object.assign(itemCssName, { [itemCss.cssName] : true, }) } return ( <el-card shadow="hover" body-style={style} class={itemCssName} nativeOnClick={() => throttle(this.handleClick, [item], this)} nativeOnDblclick={() => throttle(this.handleDblClick, [item], this)}> {this.controlInstance.getItemPSLayoutPanel() ? this.renderItemPSLayoutPanel(item) : this.renderDataViewItem(item)} </el-card> ); } /** * 绘制数据视图内容 * * @memberof AppDataViewBase */ public renderDataViewContent(h: CreateElement) { if (!this.isEnableGroup) { const { cardColXS, cardColSM, cardColMD, cardColLG } = this.controlInstance; return this.items.map((item: any, index: number) => { return ( <i-col xs={cardColXS} sm={cardColSM} md={cardColMD} lg={cardColLG}> {this.renderCard(item)} </i-col> ); }); } else { return <el-collapse>{this.renderGroup(h)}</el-collapse>; } } /** * @description 绘制加载更多 * @return {*} * @memberof AppDataViewBase */ renderLoadMore(){ return ( <div onclick={(event: MouseEvent)=>{this.loadMore(event)}} class="app-control-dataview__load--more">{this.$t('app.dataview.loadmore')}</div> ) } /** * 绘制排序栏 * * @memberof AppDataViewBase */ public renderSortBar(h: any) { return ( <app-sort-bar sortModel={this.sortModel} sortField={this.sortField} sortDir={this.sortDir} entityName={this.appDeCodeName} on-clickSort={(val: any) => throttle(this.sortClick, [val], this)} ></app-sort-bar> ); } /** * 绘制 * * @memberof AppDataViewBase */ public render(h: CreateElement) { if (!this.controlIsLoaded) { return null; } const { controlClassNames } = this.renderOptions; return ( <div class={controlClassNames}> { this.hasSortBar && <div class="control-header app-control-dataview__header"> {this.renderSortBar(h)} </div> } { this.items.length > 0 && <row class="control-content app-control-dataview__content" gutter={24} type="flex" justify="start"> {this.renderDataViewContent(h)} {Object.is(this.totalRecord, this.items.length) ? null : this.renderLoadMore()} </row> } {this.renderBatchToolbar()} {!this.ctrlLoadingService?.isLoading ? this.renderEmptyDataTip() : this.renderLoadDataTip()} {this.backTopVisible && <el-backtop target={`#${this.controlId}`}></el-backtop>} </div> ); } /** * 销毁视图回调 * * @memberof AppDataViewBase */ public destroyed() { this.ctrlDestroyed(); } }