<template> <row class="app-layoutpanel " style="width:100%;height:100%;"> <i-col v-show="detailsModel.container1.visible" :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" class="app-layoutpanel-container kanban-panel" style="width:400px;height:100%;"> <row style="height:100%;"> <i-col v-show="detailsModel.srfmajortext.visible" :md="{ span: 12, offset: 0 }" :lg="{ span: 12, offset: 0 }" style="" class="app-layoutpanel-field kanban-title"> <div class="item-field"> <app-panel-field name='srfmajortext' labelPos='LEFT' caption="" :isEmptyCaption="false" :error='detailsModel.srfmajortext.error' :data='data' :value='data.srfmajortext' :itemRules="rules.srfmajortext"> <app-span :value="data.srfmajortext" name="srfmajortext" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }' :localParam ='{ }' style=""> </app-span> </app-panel-field> </div> </i-col> <i-col v-show="detailsModel.author.visible" :md="{ span: 4, offset: 0 }" :lg="{ span: 4, offset: 0 }" style="" class="app-layoutpanel-field kanban-author"> <div class="item-field"> <app-panel-field name='author' labelPos='LEFT' caption="" :isEmptyCaption="false" :error='detailsModel.author.error' :data='data' :value='data.author' :itemRules="rules.author"> <app-span :value="data.author" name="author" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }' :localParam ='{ }' style=""> </app-span> </app-panel-field> </div> </i-col> <i-col v-show="detailsModel.srfdescription.visible" :md="{ span: 24, offset: 0 }" :lg="{ span: 22, offset: 2 }" style="" class="app-layoutpanel-field kanban-description"> <div class="item-field"> <app-panel-field name='srfdescription' labelPos='LEFT' caption="" :isEmptyCaption="false" :error='detailsModel.srfdescription.error' :data='data' :value='data.srfdescription' :itemRules="rules.srfdescription"> <app-span :value="data.srfdescription" name="srfdescription" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }' :localParam ='{ }' style=""> </app-span> </app-panel-field> </div> </i-col> </row> </i-col> </row> </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 IBIZBOOKEntityService from '@/service/ibizbook/ibizbook-service'; import HasPanelKanBanService from './has-panel-kan-ban-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 HasPanelKanBanModel from './has-panel-kan-ban-panel-model'; import CodeListService from "@/codelist/codelist-service"; import UIService from '@/uiservice/ui-service'; @Component({ components: { } }) export default class HasPanelKanBanBase extends Vue implements ControlInterface { /** * 名称 * * @type {string} * @memberof HasPanelKanBanBase */ @Prop() public name?: string; /** * 视图通讯对象 * * @type {Subject<ViewState>} * @memberof HasPanelKanBanBase */ @Prop() public viewState!: Subject<ViewState>; /** * 应用上下文 * * @type {*} * @memberof HasPanelKanBanBase */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof HasPanelKanBanBase */ @Prop() public viewparams!: any; /** * 视图状态事件 * * @public * @type {(Subscription | undefined)} * @memberof HasPanelKanBanBase */ public viewStateEvent: Subscription | undefined; /** * 获取部件类型 * * @returns {string} * @memberof HasPanelKanBanBase */ public getControlType(): string { return 'PANEL' } /** * 计数器服务对象集合 * * @type {Array<*>} * @memberof HasPanelKanBanBase */ public counterServiceArray:Array<any> = []; /** * 建构部件服务对象 * * @type {HasPanelKanBanService} * @memberof HasPanelKanBanBase */ public service: HasPanelKanBanService = new HasPanelKanBanService({ $store: this.$store }); /** * 实体服务对象 * * @type {IBIZBOOKService} * @memberof HasPanelKanBanBase */ public appEntityService: IBIZBOOKEntityService = new IBIZBOOKEntityService({ $store: this.$store }); /** * 转化数据 * * @param {any} args * @memberof HasPanelKanBanBase */ 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 HasPanelKanBanBase */ public closeView(args: any): void { let _this: any = this; _this.$emit('closeview', [args]); } /** * 计数器刷新 * * @memberof HasPanelKanBanBase */ 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(); } }) } } /** * 接口实现 * * @returns {any[]} * @memberof HasPanelKanBanBase */ getDatas(): any[] { if (!this.panelData) { return []; } return [this.panelData]; } /** * 接口实现 * * @returns {*} * @memberof HasPanelKanBanBase */ getData() { return this.panelData; } /** * 父级部件引用 * * @type {*} * @memberof HasPanelKanBanBase */ @Prop() public parentRef?: any; /** * 面板数据对象 * * @type {*} * @memberof HasPanelKanBanBase */ @Prop() public inputData?: any; /** * 操作栏模型数据 * * @type {*} * @memberof HasPanelKanBanBase */ @Prop() public actionModel?: any; /** * UI数据对象 * * @type {*} * @memberof HasPanelKanBanBase */ public data:any = {}; /** * 面板数据对象 * * @type {*} * @memberof HasPanelKanBanBase */ public panelData:any = null; /** * 数据模型对象 * * @type {HasPanelKanBanModel} * @memberof HasPanelKanBanBase */ public dataModel:HasPanelKanBanModel = new HasPanelKanBanModel(); /** * 代码表服务对象 * * @type {CodeListService} * @memberof HasPanelKanBanBase */ public codeListService:CodeListService = new CodeListService(); /** * 界面UI服务对象 * * @type {IBIZBOOKUIService} * @memberof HasPanelKanBanBase */ public appUIService:IBIZBOOKUIService = new IBIZBOOKUIService(); /** * 详情模型集合 * * @type {*} * @memberof HasPanelKanBanBase */ public detailsModel: any = { srfmajortext: new PanelFieldModel({ caption: '', itemType: 'FIELD',visible: true, disabled: false, name: 'srfmajortext', panel: this }) , author: new PanelFieldModel({ caption: '', itemType: 'FIELD',visible: true, disabled: false, name: 'author', panel: this }) , srfdescription: new PanelFieldModel({ caption: '', itemType: 'FIELD',visible: true, disabled: false, name: 'srfdescription', panel: this }) , container1: new PanelContainerModel({ caption: '', itemType: 'CONTAINER',visible: true, disabled: false, name: 'container1', panel: this }) , }; /** * 值规则对象 * * @type {*} * @memberof HasPanelKanBanBase */ public rules:any={ srfmajortext:[ { required: false, type: 'string', message: ' 值不能为空'}, { required: false, type: 'string', message: ' 值不能为空'} ], author:[ { required: false, type: 'string', message: ' 值不能为空'}, { required: false, type: 'string', message: ' 值不能为空'} ], srfdescription:[ { required: false, type: 'string', message: ' 值不能为空'}, { required: false, type: 'string', message: ' 值不能为空'} ], }; /** * 监听数据对象 * * @memberof HasPanelKanBanBase */ @Watch('inputData',{immediate:true,deep: true}) public onInputDataChange(newVal: any, oldVal: any){ if(newVal){ this.computedUIData(newVal); this.panelData = Util.deepCopy(newVal); this.computeButtonState(newVal); this.panelLogic({ name: '', newVal: null, oldVal: null }); this.$forceUpdate(); } } /** * 计算UI展示数据 * * @param codelistArray 代码表模型数组 * @memberof HasPanelKanBanBase */ public computedUIData(newVal:any){ if((this.dataModel.getDataItems instanceof Function) && this.dataModel.getDataItems().length >0){ this.dataModel.getDataItems().forEach((item:any) =>{ this.data[item.name] = newVal[item.prop]; }) } } /** * 计算面板按钮权限状态 * * @param {*} [data] 传入数据 * @memberof HasPanelKanBanBase */ public computeButtonState(data:any){ // 若为项布局面板,存在parentRef if(this.parentRef){ let targetData:any = this.parentRef.transformData(data); if(this.detailsModel && Object.keys(this.detailsModel).length >0){ Object.keys(this.detailsModel).forEach((name:any) =>{ if(this.detailsModel[name] && this.detailsModel[name].uiaction && this.detailsModel[name].uiaction.dataaccaction && Object.is(this.detailsModel[name].itemType,"BUTTON")){ this.detailsModel[name].isPower = true; let tempUIAction:any = JSON.parse(JSON.stringify(this.detailsModel[name].uiaction)); let result: any[] = ViewTool.calcActionItemAuthState(targetData,[tempUIAction],this.appUIService?this.appUIService:null); this.detailsModel[name].visible = tempUIAction.visabled; this.detailsModel[name].disabled = tempUIAction.disabled; this.detailsModel[name].isPower = result[0] === 1 ? true : false; } }) } } } /** * 界面行为 * * @param {*} row * @param {*} tag * @param {*} $event * @memberof HasPanelKanBanBase */ public uiAction(row: any, tag: any, $event: any) { } /** * 打开编辑数据视图 * * @type {any} * @memberof HasPanelKanBanBase */ 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 HasPanelKanBanBase */ 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 HasPanelKanBanBase */ public async remove(datas: any[]): Promise<any> { if (this.parentRef.remove && this.parentRef.remove instanceof Function) { return this.parentRef.remove(datas); } } /** * 刷新 * * @param {*} [args={}] * @memberof HasPanelKanBanBase */ public refresh(args: any = {}) { if (this.parentRef.refresh && this.parentRef.refresh instanceof Function) { this.parentRef.refresh(args); } } /** * 设置变更面板编辑项的值 * * @param data 面板数据 * @param {{ name: string, value: any }} $event * @returns {void} * @memberof HasPanelKanBanBase */ public onPanelItemValueChange(data: any,$event: { name: string, value: any }): void { if (!$event) { return; } if (!$event.name || Object.is($event.name, '') || !data.hasOwnProperty($event.name)) { return; } data[$event.name] = $event.value; this.panelEditItemChange(data, $event.name, $event.value); } /** * 面板编辑项值变化后续操作 * * @public * @param data 面板数据 * @param property 编辑项名 * @param value 编辑项值 * @returns {void} * @memberof HasPanelKanBanBase */ public panelEditItemChange(data: any, 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}); } } } /** * 分页切换事件 * * @memberof HasPanelKanBanBase */ public handleTabPanelClick(name:string,$event:any){ this.detailsModel[name].clickPage($event.name); } /** * 面板逻辑 * * @public * @param {{ name: string, newVal: any, oldVal: any }} { name, newVal, oldVal } * @memberof HasPanelKanBanBase */ public panelLogic({ name, newVal, oldVal }: { name: string, newVal: any, oldVal: any }): void { } } </script> <style lang='less'> @import './has-panel-kan-ban-panel.less'; </style>