<template> <div class="app-layoutpanel Listpanel" v-loading="isLayoutLoadding" :style="{width: '100%', height: '100%', overflow: 'auto'}"> <div v-show="!isLayoutLoadding" :style="{height: '100%', width: '100%'}"> <app-standard-container name="container1" :isMultiContainer="false" :layoutModelDetails="layoutModelDetails"> <template #container4> <app-standard-container name="container4" :isMultiContainer="false" :layoutModelDetails="layoutModelDetails"> <template #field_image> <app-field-image-dynamic name="field_image" :value="layoutData.field_image" :layoutModelDetails="layoutModelDetails" /> </template> <template #field_text_dynamic> <app-preset-text name="field_text_dynamic" :value="layoutData.field_text_dynamic" :layoutModelDetails="layoutModelDetails"/> </template> </app-standard-container> </template> <template #container2> <app-standard-container name="container2" :isMultiContainer="false" :layoutModelDetails="layoutModelDetails"> <template #static_label1> <app-preset-text name="static_label1" :layoutModelDetails="layoutModelDetails"/> </template> <template #field_text_dynamic1> <app-preset-text name="field_text_dynamic1" :value="layoutData.field_text_dynamic1" :layoutModelDetails="layoutModelDetails"/> </template> </app-standard-container> </template> <template #container7> <app-standard-container name="container7" :isMultiContainer="false" :layoutModelDetails="layoutModelDetails"> <template #static_label3> <app-preset-text name="static_label3" :layoutModelDetails="layoutModelDetails"/> </template> <template #field_text_dynamic2> <app-preset-text name="field_text_dynamic2" :value="layoutData.field_text_dynamic2" :layoutModelDetails="layoutModelDetails"/> </template> </app-standard-container> </template> <template #container8> <app-standard-container name="container8" :isMultiContainer="false" :layoutModelDetails="layoutModelDetails"> <template #static_label4> <app-preset-text name="static_label4" :layoutModelDetails="layoutModelDetails"/> </template> <template #field_text_dynamic4> <app-preset-text name="field_text_dynamic4" :value="layoutData.field_text_dynamic4" :layoutModelDetails="layoutModelDetails"/> </template> </app-standard-container> </template> <template #container6> <app-standard-container name="container6" :isMultiContainer="false" :layoutModelDetails="layoutModelDetails"> <template #field_text_dynamic5> <app-preset-text name="field_text_dynamic5" :value="layoutData.field_text_dynamic5" :layoutModelDetails="layoutModelDetails"/> </template> <template #field_text_dynamic3> <app-preset-text name="field_text_dynamic3" :value="layoutData.field_text_dynamic3" :layoutModelDetails="layoutModelDetails"/> </template> <template #field_text_dynamic6> <app-preset-text name="field_text_dynamic6" :value="layoutData.field_text_dynamic6" :layoutModelDetails="layoutModelDetails"/> </template> <template #button_calluilogic1> <app-preset-button name="button_calluilogic1" :layoutModelDetails="layoutModelDetails" @itemClick="(name) => handleButtonClick(name)"/> </template> </app-standard-container> </template> </app-standard-container> </div> </div> </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 IBIZBOOKEntityService from '@/service/ibizbook/ibizbook-service'; import ListpanelService from './listpanel-panel-service'; import IBIZBOOKUIService from '@/uiservice/ibizbook/ibizbook-ui-service'; import { PanelDetailModel,PanelRawitemModel,PanelTabPanelModel,PanelTabPageModel,PanelFieldModel,PanelContainerModel,PanelControlModel,PanelUserControlModel,PanelButtonModel } from '@/model/panel-detail'; import ListpanelModel from './listpanel-panel-model'; import CodeListService from "@/codelist/codelist-service"; import UIService from '@/uiservice/ui-service'; @Component({ components: { } }) export default class ListpanelBase extends Vue implements ControlInterface { /** * 名称 * * @type {string} * @memberof ListpanelBase */ @Prop() public name?: string; /** * 视图通讯对象 * * @type {Subject<ViewState>} * @memberof ListpanelBase */ @Prop() public viewState!: Subject<ViewState>; /** * 应用上下文 * * @type {*} * @memberof ListpanelBase */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof ListpanelBase */ @Prop() public viewparams!: any; /** * 视图操作参数(父级) * * @type {*} * @memberof ListpanelBase */ @Prop() public pViewCtx!: any; /** * 视图操作参数 * * @type {*} * @memberof ListpanelBase */ public viewCtx: any = {}; /** * 监听视图操作参数变化 * * @type {*} * @memberof ListpanelBase */ @Watch('pViewCtx', { immediate: true }) public onViewCtxChange(newVal: any, oldVal: any) { Object.assign(this.viewCtx, newVal, { xData: this, ctrl: this }); } /** * 视图状态事件 * * @public * @type {(Subscription | undefined)} * @memberof ListpanelBase */ public viewStateEvent: Subscription | undefined; /** * 获取部件类型 * * @returns {string} * @memberof ListpanelBase */ public getControlType(): string { return 'PANEL' } /** * 计数器服务对象集合 * * @type {Array<*>} * @memberof ListpanelBase */ public counterServiceArray:Array<any> = []; /** * 建构部件服务对象 * * @type {ListpanelService} * @memberof ListpanelBase */ public service: ListpanelService = new ListpanelService({ $store: this.$store }); /** * 实体服务对象 * * @type {IBIZBOOKService} * @memberof ListpanelBase */ public appEntityService: IBIZBOOKEntityService = new IBIZBOOKEntityService({ $store: this.$store }); /** * 转化数据 * * @param {any} args * @memberof ListpanelBase */ 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 ListpanelBase */ public closeView(args: any): void { let _this: any = this; _this.$emit('closeview', [args]); } /** * 计数器刷新 * * @memberof ListpanelBase */ 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 ListpanelBase */ 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; } /** * 接口实现 * * @returns {any[]} * @memberof ListpanelBase */ getDatas(): any[] { if (!this.layoutData) { return []; } return [this.layoutData]; } /** * 接口实现 * * @returns {*} * @memberof ListpanelBase */ getData() { return this.layoutData; } /** * 父级部件引用 * * @type {*} * @memberof ListpanelBase */ @Prop() public parentRef?: any; /** * 面板数据对象 * * @type {*} * @memberof ListpanelBase */ @Prop() public inputData?: any; /** * 操作栏模型数据 * * @type {*} * @memberof ListpanelBase */ @Prop() public actionModel?: any; /** * UI数据对象 * * @type {*} * @memberof ListpanelBase */ public data:any = {}; /** * 数据模型对象 * * @type {ListpanelModel} * @memberof ListpanelBase */ public dataModel:ListpanelModel = new ListpanelModel(); /** * 代码表服务对象 * * @type {CodeListService} * @memberof ListpanelBase */ public codeListService:CodeListService = new CodeListService(); /** * 界面UI服务对象 * * @type {IBIZBOOKUIService} * @memberof ListpanelBase */ public appUIService:IBIZBOOKUIService = new IBIZBOOKUIService(); /** * 视图布局顶级成员名称 * * @public * @memberof List_itempanelBase */ public rootLayoutDetailNames: string[] = [ 'container1' ]; /** * 视图布局面板项模型对象 * * @public * @memberof List_itempanelBase */ public layoutItems:any = { field_image:{ name: 'field_image', type: 'ITEMLAYOUT', caption: '图片(动态)', isShowCaption: false, sysCss: '', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:80, heightMode:'PX', layoutWidth:80, widthMode:'PX', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container4', panel: this , required: false, fieldState: '0', predefinedType: 'FIELD_IMAGE', dataItemName:'icon', }, field_text_dynamic:{ name: 'field_text_dynamic', type: 'ITEMLAYOUT', caption: '文本(动态)', isShowCaption: false, sysCss: '', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'OUTERMEDIUM', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container4', panel: this , required: false, fieldState: '0', predefinedType: 'FIELD_TEXT_DYNAMIC', renderMode: 'TEXT_DYNAMIC', dataItemName:'ibizbookname', wrapMode:'', vAlign:'', hAlign:'', }, container4:{ name: 'container4', type: 'ITEMLAYOUT', caption: '容器', titleBarCloseMode: 0, isShowCaption: false, sysCss: '', itemType: 'CONTAINER', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'FLEX', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'row',vAlign:''}, parentName: 'container1', panel: this , details:['field_image','field_text_dynamic'] , dataRegionType: 'INHERIT' }, static_label1:{ name: 'static_label1', type: 'ITEMLAYOUT', caption: '标签', isShowCaption: true, sysCss: '', itemType: 'RAWITEM', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:80, widthMode:'PX', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container2', panel: this , viewType: 'DELISTVIEW', predefinedType: 'STATIC_LABEL', contentType: 'RAW', contentStyle: '', rawContent: '作者:', htmlContent: '', renderMode: 'PARAGRAPH', wrapMode:'', vAlign:'', hAlign:'RIGHT', }, field_text_dynamic1:{ name: 'field_text_dynamic1', type: 'ITEMLAYOUT', caption: '文本(动态)', isShowCaption: false, sysCss: '', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container2', panel: this , required: false, fieldState: '0', predefinedType: 'FIELD_TEXT_DYNAMIC', renderMode: 'TEXT_DYNAMIC', dataItemName:'author', wrapMode:'', vAlign:'', hAlign:'', }, container2:{ name: 'container2', type: 'ITEMLAYOUT', caption: '容器', titleBarCloseMode: 0, isShowCaption: false, sysCss: '', itemType: 'CONTAINER', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'FLEX', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'row',vAlign:''}, parentName: 'container1', panel: this , details:['static_label1','field_text_dynamic1'] , dataRegionType: 'INHERIT' }, static_label3:{ name: 'static_label3', type: 'ITEMLAYOUT', caption: '标签', isShowCaption: true, sysCss: '', itemType: 'RAWITEM', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:80, widthMode:'PX', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container7', panel: this , viewType: 'DELISTVIEW', predefinedType: 'STATIC_LABEL', contentType: 'RAW', contentStyle: '', rawContent: '借阅数量:', htmlContent: '', renderMode: 'PARAGRAPH', wrapMode:'', vAlign:'', hAlign:'RIGHT', }, field_text_dynamic2:{ name: 'field_text_dynamic2', type: 'ITEMLAYOUT', caption: '文本(动态)', isShowCaption: false, sysCss: '', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container7', panel: this , required: false, fieldState: '0', predefinedType: 'FIELD_TEXT_DYNAMIC', renderMode: 'TEXT_DYNAMIC', dataItemName:'booknumber', wrapMode:'', vAlign:'', hAlign:'', }, container7:{ name: 'container7', type: 'ITEMLAYOUT', caption: '容器', titleBarCloseMode: 0, isShowCaption: false, sysCss: '', itemType: 'CONTAINER', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'FLEX', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'row',vAlign:''}, parentName: 'container1', panel: this , details:['static_label3','field_text_dynamic2'] , dataRegionType: 'INHERIT' }, static_label4:{ name: 'static_label4', type: 'ITEMLAYOUT', caption: '标签', isShowCaption: true, sysCss: '', itemType: 'RAWITEM', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:80, widthMode:'PX', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container8', panel: this , viewType: 'DELISTVIEW', predefinedType: 'STATIC_LABEL', contentType: 'RAW', contentStyle: '', rawContent: '书籍描述:', htmlContent: '', renderMode: 'PARAGRAPH', wrapMode:'', vAlign:'', hAlign:'RIGHT', }, field_text_dynamic4:{ name: 'field_text_dynamic4', type: 'ITEMLAYOUT', caption: '文本(动态)', isShowCaption: false, sysCss: '', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container8', panel: this , required: false, fieldState: '0', predefinedType: 'FIELD_TEXT_DYNAMIC', renderMode: 'TEXT_DYNAMIC', dataItemName:'subtext', wrapMode:'', vAlign:'', hAlign:'', }, container8:{ name: 'container8', type: 'ITEMLAYOUT', caption: '容器', titleBarCloseMode: 0, isShowCaption: false, sysCss: '', itemType: 'CONTAINER', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'FLEX', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'row',vAlign:''}, parentName: 'container1', panel: this , details:['static_label4','field_text_dynamic4'] , dataRegionType: 'INHERIT' }, field_text_dynamic5:{ name: 'field_text_dynamic5', type: 'ITEMLAYOUT', caption: '文本(动态)', isShowCaption: false, sysCss: 'book-type', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:40, widthMode:'PX', spacingBottom:'', spacingLeft:'', spacingRight:'OUTERSMALL', spacingTop:'', hAlignSelf:'CENTER', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container6', panel: this , required: false, fieldState: '0', predefinedType: 'FIELD_TEXT_DYNAMIC', renderMode: 'TEXT_DYNAMIC', dataItemName:'type', wrapMode:'', vAlign:'', hAlign:'CENTER', }, field_text_dynamic3:{ name: 'field_text_dynamic3', type: 'ITEMLAYOUT', caption: '文本(动态)', isShowCaption: false, sysCss: 'book-press', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:150, widthMode:'PX', spacingBottom:'', spacingLeft:'OUTERSMALL', spacingRight:'OUTERSMALL', spacingTop:'', hAlignSelf:'CENTER', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container6', panel: this , required: false, fieldState: '0', predefinedType: 'FIELD_TEXT_DYNAMIC', renderMode: 'TEXT_DYNAMIC', dataItemName:'press', wrapMode:'', vAlign:'', hAlign:'CENTER', }, field_text_dynamic6:{ name: 'field_text_dynamic6', type: 'ITEMLAYOUT', caption: '文本(动态)', isShowCaption: false, sysCss: 'book-price', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:50, widthMode:'PX', spacingBottom:'', spacingLeft:'OUTERSMALL', spacingRight:'OUTERSMALL', spacingTop:'', hAlignSelf:'CENTER', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container6', panel: this , required: false, fieldState: '0', predefinedType: 'FIELD_TEXT_DYNAMIC', renderMode: 'TEXT_DYNAMIC', dataItemName:'price', wrapMode:'', vAlign:'', hAlign:'CENTER', }, button_calluilogic1:{ name: 'button_calluilogic1', type: 'ITEMLAYOUT', caption: '无处理按钮', isShowCaption: true, sysCss: '', itemType: 'BUTTON', itemStyle: 'INFO', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:100, widthMode:'PX', spacingBottom:'', spacingLeft:'', spacingRight:'OUTERSMALL', spacingTop:'', hAlignSelf:'CENTER', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, parentName: 'container6', panel: this , xDataControlName: 'list', buttonStyle: 'INFO', borderStyle: '', iconAlign: '', renderMode: '', }, container6:{ name: 'container6', type: 'ITEMLAYOUT', caption: '容器', titleBarCloseMode: 0, isShowCaption: false, sysCss: '', itemType: 'CONTAINER', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'FLEX', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'row',vAlign:''}, parentName: 'container1', panel: this , details:['field_text_dynamic5','field_text_dynamic3','field_text_dynamic6','button_calluilogic1'] , dataRegionType: 'INHERIT' }, container1:{ name: 'container1', type: 'ITEMLAYOUT', caption: '容器', titleBarCloseMode: 0, isShowCaption: false, sysCss: '', itemType: 'CONTAINER', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'FLEX', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:0, flexParams:{align:'',dir:'column',vAlign:''}, panel: this , details:['container4','container2','container7','container8','container6'] , dataRegionType: 'INHERIT' } } /** * 布局面板是否加载 * * @public * @memberof List_itempanelBase */ public isLayoutLoadding: boolean = true; /** * 布局面板数据 * * @public * @memberof List_itempanelBase */ public layoutData:any = {}; /** * 布局面板模型对象 * * @public * @memberof List_itempanelBase */ public layoutModelDetails:any = {}; /** * 初始化布局 * * @public * @memberof List_itempanelBase */ public async initLayout() { if (this.rootLayoutDetailNames.length > 0) { for (let i = 0; i < this.rootLayoutDetailNames.length; i++) { const name = this.rootLayoutDetailNames[i]; const rootItem = this.layoutItems[name]; if (!rootItem) { return; } await this.initLayoutItem(rootItem); } } return true; } /** * 初始化布局项 * * @public * @memberof List_itempanelBase */ public async initLayoutItem(layoutModelItem: any, index?: number) { const { name } = layoutModelItem; const layoutModelDetail = Util.getLayoutItemInstance(layoutModelItem); if (!(index || index === 0)) { await layoutModelDetail.load(this.context, this.viewparams); this.$set(this.layoutModelDetails, name, layoutModelDetail); this.$set(this.layoutData, name, layoutModelDetail.getData()); } else { layoutModelDetail.setIndex(index); await layoutModelDetail.load(this.context, this.viewparams); this.$set(this.layoutModelDetails, `${name}_${index}`, layoutModelDetail); this.$set(this.layoutData, `${name}_${index}`, layoutModelDetail.getData()); } if (layoutModelDetail && layoutModelDetail.details) { if (layoutModelDetail.dataRegionType === 'MULTIDATA') { const multiData = layoutModelDetail.getData(); if (multiData && multiData.length > 0) { for (let i = 0; i < multiData.length; i++) { for (let j = 0; j < layoutModelDetail.details.length; j++) { const key = layoutModelDetail.details[j]; if (this.layoutItems[key]) { await this.initLayoutItem(this.layoutItems[key], i); } } } } } else { for (let i = 0; i < layoutModelDetail.details.length; i++) { const key = layoutModelDetail.details[i]; if (this.layoutItems[key]) { await this.initLayoutItem(this.layoutItems[key], index); } } } } } /** * 计算面板按钮权限状态 * * @public * @memberof List_itempanelBase */ public async computeButtonAuthState() { for (const key in this.layoutModelDetails) { const layoutModel = this.layoutModelDetails[key]; if (layoutModel.itemType == 'BUTTON') { await layoutModel.computeActionAuthState(); } } } /** * 监听数据对象 * * @memberof ListpanelBase */ @Watch('inputData', { deep: true, immediate: true } ) public onInputDataChange(newVal: any, oldVal: any){ if(newVal){ this.computedUIData(newVal); } } /** * 生命周期 * * @memberof ListpanelBase */ public mounted () { this.afterMounted(); } /** * 执行mounted后的逻辑 * * @memberof ListpanelBase */ public afterMounted () { const _this: any = this; _this.initLayout().then((result: any) => { _this.isLayoutLoadding = false; }); } /** * 计算UI展示数据 * * @param codelistArray 代码表模型数组 * @memberof ListpanelBase */ public computedUIData(newVal:any){ if((this.dataModel.getDataItems instanceof Function) && this.dataModel.getDataItems().length >0){ this.dataModel.getDataItems().forEach((item:any) =>{ this.data[item.prop] = newVal[item.prop]; }) } } /** * 打开编辑数据视图 * * @type {any} * @memberof ListpanelBase */ public opendata(args: any[],fullargs?:any[],params?: any, $event?: any, xData?: any){ if (this.parentRef.opendata && this.parentRef.opendata instanceof Function) { this.parentRef.opendata(args,fullargs,params, $event, xData); } } /** * 打开新建数据视图 * * @type {any} * @memberof ListpanelBase */ public newdata(args: any[],fullargs?:any[], params?: any, $event?: any, xData?: any) { if (this.parentRef.newdata && this.parentRef.newdata instanceof Function) { this.parentRef.newdata(args,fullargs,params, $event, xData); } } /** * 删除 * * @param {any[]} datas * @returns {Promise<any>} * @memberof ListpanelBase */ public async remove(datas: any[]): Promise<any> { if (this.parentRef.remove && this.parentRef.remove instanceof Function) { return this.parentRef.remove(datas); } } /** * 刷新 * * @param {*} [args={}] * @memberof ListpanelBase */ public refresh(args: any = {}) { if (this.parentRef.refresh && this.parentRef.refresh instanceof Function) { this.parentRef.refresh(args); } } /** * 处理值改变 * * @public * @params args 改变数据 * @params index 多数据容器下标 * @memberof List_itempanelBase */ public handleValueChange(args: { name: string, value: any }, index?: number) { const { name, value } = args; let fullName = (index || index === 0) ? `${name}_${index}` : name; if (!fullName || !this.layoutData.hasOwnProperty(fullName)) { return; } this.layoutData[fullName] = value; this.layoutModelDetails[fullName].setData(value); this.panelLogic(name, index); this.panelEditItemChange(name, value); this.computeButtonAuthState(); } /** * 面板编辑项值变化后续操作 * * @public * @param property 编辑项名 * @param value 编辑项值 * @returns {void} * @memberof ListpanelBase */ public panelEditItemChange(property: string, value: any){ // 面板数据变化事件 if((this.dataModel.getDataItems instanceof Function) && this.dataModel.getDataItems().length >0){ let modelitem =this.dataModel.getDataItems().find((item:any) =>{ return item.name === property; }) if(modelitem){ this.$emit('panelDataChange',{[modelitem.prop]: value}); } } } /** * 面板逻辑 * * @public * @params name 改变项名称 * @params index 多数据容器下标 * @memberof ListpanelBase */ public panelLogic(name: string, index?: number): void { } /** * 处理按钮点击 * * @public * @params name 按钮项名称 * @params index 多数据容器下标 * @memberof List_itempanelBase */ public handleButtonClick(name: string, index?: number) { let datas: any[] = []; let fullName = (index || index === 0) ? `${name}_${index}` : name; const data: any = this.layoutModelDetails[fullName].getData(); if (data) { if (data instanceof Array) { datas = [...data]; } else { datas = [data]; } } const xData: any = this.layoutModelDetails[fullName].getDataArea(); const paramJO: any = {}; const contextJO: any = {}; const _this: any = this; } } </script> <style lang='scss'> @import './listpanel-panel.scss'; </style>