Skip to content

I
iBiz4jVue
提交 47703316 编写于 作者: Mosher's avatar Mosher
浏览文件
操作

增加数据看板（卡片）部件

上级 fd873a4c
显示空白字符变更
内嵌 并排
正在显示 包含 434 行增加 和 0 行删除
@CONTROL/数据看板（卡片）/CONTROL-BASE.vue.ftl 0 → 100644
浏览文件 @ 47703316
<template>
<div class='dashboard'>
<row v-if="isEnableCustomized">
<app-build @handleClick="handleClick"></app-build>
</row>
<row v-if="!isHasCustomized">
<#-- BEGIN：看板Flex布局-前 -->
<#if ctrl.getLayoutMode?? && ctrl.getLayoutMode() == 'FLEX'>
<div style = 'display : flex; <#if ctrl.getFlexAlign()??> justify-content :${ctrl.getFlexAlign()};</#if> <#if ctrl.getFlexDir()??> flex-direction:${ctrl.getFlexDir()};</#if> <#if ctrl.getFlexVAlign()??>align-items:${ctrl.getFlexVAlign()};</#if> '>
</#if>
<#-- END：看板Flex布局-前 -->
<#list ctrl.getPSPortlets() as portlet><#t>
<#if portlet.getPortletType?? && portlet.getPortletType()??><#t>
<#-- BEGIN：获取父的layout，自己的LayoutPos -->
<#assign layout=ctrl.getLayoutMode()>
<#assign LayoutPos = portlet.getPSLayoutPos()>
<#-- END：获取父的layout，自己的LayoutPos -->
<#-- BEGIN：门户部件绘制，栅格布局 -->
<#if layout == 'TABLE_12COL'>
<#assign multiple = 2/>
<#else>
<#assign multiple = 1/>
</#if>
<#macro format_numer num>
<#if num lt 0 >
0<#t>
<#elseif num gt 24>
24<#t>
<#else>
${num}<#t>
</#if>
</#macro>
<#if (layout == 'TABLE_24COL' || layout == 'TABLE_12COL') && LayoutPos??><#t>
<i-col<#if LayoutPos.getColXS() != -1> :xs="{ span: <@format_numer LayoutPos.getColXS()*multiple/>, offset: <#if LayoutPos.getColXSOffset() != -1><@format_numer LayoutPos.getColXSOffset()*multiple /><#else>0</#if> }"</#if><#if LayoutPos.getColSM() != -1> :sm="{ span: <@format_numer LayoutPos.getColSM()*multiple />, offset: <#if LayoutPos.getColSMOffset() != -1><@format_numer LayoutPos.getColSMOffset()*multiple /><#else>0</#if> }"</#if><#if LayoutPos.getColMD() != -1> :md="{ span: <@format_numer LayoutPos.getColMD()*multiple />, offset: <#if LayoutPos.getColMDOffset() != -1><@format_numer LayoutPos.getColMDOffset()*multiple /><#else>0</#if> }"</#if><#if LayoutPos.getColLG() != -1> :lg="{ span: <@format_numer LayoutPos.getColLG()*multiple />, offset: <#if LayoutPos.getColLGOffset() != -1><@format_numer LayoutPos.getColLGOffset()*multiple /><#else>0</#if> }"</#if>>
<#if portlet.getPSPortlets?? portlet.getPSPortlets()??>
<card class="portlet-card" :bordered="false" dis-hover :padding="10">
<#else>
<card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10">
</#if>
<#if portlet.getPortletType() == 'CONTAINER' && portlet.isShowTitleBar() && portlet.getTitle()?has_content>
<a slot='extra'></a>
</#if>
<span>
<@ibizindent blank=10><#t>
${P.getCtrlCode(portlet, 'CONTROL.html').code}
</@ibizindent>
</span>
</card>
</i-col>
<#-- ELSE：门户部件绘制，Flex -->
<#else>
<#if portlet.getPSPortlets?? portlet.getPSPortlets()??>
<card class="portlet-card" :bordered="false" dis-hover :padding="10">
<#else>
<card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10">
</#if>
<#if portlet.getPortletType() == 'CONTAINER' && portlet.isShowTitleBar() && portlet.getTitle()?has_content>
<a slot='extra'></a>
</#if>
<span>
<@ibizindent blank=10><#t>
${P.getCtrlCode(portlet, 'CONTROL.html').code}
</@ibizindent>
</span>
</card>
</#if>
<#-- END：门户部件绘制 -->
</#if>
</#list>
<#-- BEGIN：看板Flex布局-后 -->
<#if ctrl.getLayoutMode?? && ctrl.getLayoutMode() == 'FLEX'>
</div>
</#if>
<#-- END：看板Flex布局-后 -->
</row>
<row v-if="isHasCustomized" style="width: 100%;min-height: calc(100% - 40px);">
<div class="portlet-container" style="position: relative;width:100%;">
<template v-for="(item, index) of modelDta">
<#noparse><div :key="index" :style="{zIndex: 10, position: 'absolute', height: item.h*layoutRowH + 'px', width: `calc(100% / ${layoutColNum} * ${item.w})`,top: item.y*layoutRowH + 'px', left: `calc(100% / ${layoutColNum} * ${item.x})`}"></#noparse>
<component :key="$util.createUUID()" :is="item.componentName" :name="item.portletCodeName" :context="JSON.parse(JSON.stringify(context))" :viewDefaultUsage="false" :isAdaptiveSize="true" :viewState="viewState"></component>
</div>
</template>
</div>
</row>
</div>
</template>
<#assign import_block>
import UtilService from '@/utilservice/util-service';
</#assign>
<#ibizinclude>
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude>
/**
* 是否支持看板定制
*
* @public
* @type {(boolean)}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
@Prop() public isEnableCustomized!:boolean;
/**
* 是否已有看板定制
*
* @public
* @type {(boolean)}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public isHasCustomized:boolean = false;
/**
* 模型数据
*
* @public
* @type {(*)}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public modelDta:any;
/**
* modleId
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public modelId:string = "dashboard_<#if ctrl.getPSAppDataEntity()??>${ctrl.getPSAppDataEntity().getCodeName()?lower_case}<#else>app</#if>_${ctrl.getCodeName()?lower_case}";
/**
* 建构功能服务对象
*
* @type {UtilService}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public utilService:UtilService = new UtilService();
/**
* 功能服务名称
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public utilServiceName:string = "<#if ctrl.getPSAppDynaDashboardUtil?? && ctrl.getPSAppDynaDashboardUtil()??>${ctrl.getPSAppDynaDashboardUtil().getCodeName()?lower_case}</#if>";
/**
* 获取多项数据
*
* @returns {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public getDatas(): any[] {
return [];
}
/**
* 获取单项树
*
* @returns {*}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public getData(): any {
return {};
}
/**
* vue 生命周期
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public created() {
this.afterCreated();
}
/**
* 执行created后的逻辑
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public afterCreated(){
if (this.viewState) {
this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
if (!Object.is(tag, this.name)) {
return;
}
if (Object.is('load', action)) {
this.loadModel();
}
});
}
}
/**
* 动态设计水平列数
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public layoutColNum:number = 12;
/**
* 动态设计单元格高度，80px
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public layoutRowH:number = 80;
/**
* 通知状态
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public notifyState(){
this.$nextTick(() =>{
if (this.isHasCustomized) {
if (this.modelDta && this.modelDta.length > 0) {
this.modelDta.forEach((item: any) => {
this.viewState.next({
tag: item.portletCodeName,
action: "load",
data: JSON.parse(JSON.stringify(this.viewparams))
});
});
}
} else {
if (this.viewState) {
const refs: any = this.$refs;
Object.keys(refs).forEach((name: string) => {
this.viewState.next({
tag: name,
action: "load",
data: JSON.parse(JSON.stringify(this.viewparams))
});
});
}
}
})
}
/**
* 加载布局与数据模型
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public loadModel(){
if(this.isEnableCustomized){
this.utilService.getService(this.utilServiceName).then((service:any) =>{
service.loadModelData(JSON.parse(JSON.stringify(this.context)),{modelid:this.modelId,utilServiceName:this.utilServiceName}).then((res:any) =>{
if(res && res.status == 200){
const data:any = res.data;
if(data && data.length >0){
this.isHasCustomized = true;
this.modelDta = data;
this.$forceUpdate();
}else{
this.isHasCustomized = false;
}
this.notifyState();
}else{
console.error("加载面板模型异常");
this.isHasCustomized = false;
this.notifyState();
}
}).catch((error:any)=>{
console.error("加载面板模型异常");
console.error(error);
this.isHasCustomized = false;
this.notifyState();
});
})
}else{
this.notifyState();
}
}
/**
* 处理私人定制按钮
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public handleClick(){
const view:any ={
viewname: 'app-portal-design',
title: (this.$t('app.dashBoard.handleClick.title')),
width: 1600,
placement: 'DRAWER_RIGHT'
}
const viewparam:any ={
modelid:this.modelId,
utilServiceName:this.utilServiceName,
appdeName:<#if ctrl.getPSAppDataEntity?? && ctrl.getPSAppDataEntity()??>'${ctrl.getPSAppDataEntity().getCodeName()}'<#else>'app'</#if>
}
const appdrawer = this.$appdrawer.openDrawer(view, JSON.parse(JSON.stringify(this.context)), viewparam);
appdrawer.subscribe((result: any) => {
if(Object.is(result.ret,'OK')){
this.loadModel();
}
});
}
/**
* vue 生命周期
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public destroyed() {
this.afterDestroy();
}
/**
* 执行destroyed后的逻辑
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public afterDestroy() {
if (this.viewStateEvent) {
this.viewStateEvent.unsubscribe();
}
<#if destroyed_block??>
${destroyed_block}
</#if>
}
<#ibizinclude>
../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl
</#ibizinclude>
<#ibizinclude>
../@MACRO/CONTROL/CONTROL-BASE.style.ftl
</#ibizinclude>
\ No newline at end of file
@CONTROL/数据看板（卡片）/CONTROL.html.ftl 0 → 100644
浏览文件 @ 47703316
<view_${ctrl.getName()}
:viewState="viewState"
:viewparams="viewparams"
:context="JSON.parse(JSON.stringify(context))"
:isEnableCustomized = "${ctrl.isEnableCustomized()?c}"
name="${ctrl.name}"
ref='${ctrl.name}'
<#if ctrl.getHookEventNames()??>
<#list ctrl.getHookEventNames() as eventName>
@${eventName?lower_case}="${ctrl.name}_${eventName?lower_case}($event)"
</#list>
</#if>
@closeview="closeView($event)">
</view_${ctrl.getName()}>
\ No newline at end of file
@CONTROL/数据看板（卡片）/CONTROL.less.ftl 0 → 100644
浏览文件 @ 47703316
.dashboard {
flex-grow: 1;
height: 100%;
overflow: auto;
.ivu-row{
.ivu-card{
.ivu-card-head{
border-bottom:0;
p{
display: flex;
height: 24px;
align-items: center;
.line{
width:100%;
border-bottom: 1px solid #e8eaec;
margin-left: 14px;
}
}
}
}
}
.portlet-card {
background-color: #f0f0f0;
}
.custom-card {
background-color: #ffffff;
margin: 5px;
box-shadow: 1px 1px 5px rgb(209, 205, 205);
}
}
<#ibizinclude>
../@MACRO/CSS/DEFAULT.less.ftl
</#ibizinclude>
@CONTROL/数据看板（卡片）/CONTROL.vue.ftl 0 → 100644
浏览文件 @ 47703316
<script lang='tsx'>
import { Component } from 'vue-property-decorator';
import ${srfclassname('${ctrl.codeName}')}Base from './${srffilepath2(ctrl.getCodeName())}-${ctrl.getControlType()?lower_case}-base.vue';
<#if ctrl.getPSControls?? && ctrl.getPSControls()??>
<#list ctrl.getPSControls() as subctrl>
<#if subctrl.getControlType() != 'TOOLBAR' && subctrl.getControlType() != 'CONTEXTMENU' && (subctrl.getControlType() != 'PORTLET' || subctrl.getPortletType() != 'CONTAINER') >
<#if subctrl.getPSAppDataEntity?? && subctrl.getPSAppDataEntity()??>
import view_${subctrl.getName()} from '@widgets/${srffilepath2(subctrl.getPSAppDataEntity().getCodeName())}/${srffilepath2(subctrl.getCodeName())}-${subctrl.getControlType()?lower_case}/${srffilepath2(subctrl.getCodeName())}-${subctrl.getControlType()?lower_case}.vue';
<#else>
import view_${subctrl.getName()} from '@widgets/app/${srffilepath2(subctrl.getCodeName())}-${subctrl.getControlType()?lower_case}/${srffilepath2(subctrl.getCodeName())}-${subctrl.getControlType()?lower_case}.vue';
</#if>
</#if>
</#list>
</#if>
<#if ctrl.getPSLayoutPanels?? && ctrl.getPSLayoutPanels()??>
<#list ctrl.getPSLayoutPanels() as panel>
import layout_${panel.getName()} from '@widgets/${srffilepath2(panel.getPSAppDataEntity().getCodeName())}/${srffilepath2(panel.getCodeName())}-${panel.getControlType()?lower_case}/${srffilepath2(panel.getCodeName())}-${panel.getControlType()?lower_case}.vue';
</#list>
</#if>
<#if import_block??>${import_block}</#if>
@Component({
components: {
<#if ctrl.getPSControls?? && ctrl.getPSControls()??>
<#list ctrl.getPSControls() as subctrl>
<#if subctrl.getControlType() != 'TOOLBAR' && subctrl.getControlType() != 'CONTEXTMENU' && (subctrl.getControlType() != 'PORTLET' || subctrl.getPortletType() != 'CONTAINER') >
view_${subctrl.getName()},
</#if>
</#list>
</#if>
<#if ctrl.getPSLayoutPanels?? && ctrl.getPSLayoutPanels()??>
<#list ctrl.getPSLayoutPanels() as panel>
layout_${panel.getName()},
</#list>
</#if>
<#if components??>${components}</#if>
}
})
export default class ${srfclassname('${ctrl.codeName}')} extends ${srfclassname('${ctrl.codeName}')}Base {
}
</script>
\ No newline at end of file
@CONTROL/数据看板（卡片）/MODEL.ts.ftl 0 → 100644
浏览文件 @ 47703316
<#ibizinclude>
../@MACRO/MODEL/DEFAULT.ts.ftl
</#ibizinclude>
\ No newline at end of file
@CONTROL/数据看板（卡片）/SERVICE.ts.ftl 0 → 100644
浏览文件 @ 47703316
<#ibizinclude>
../@MACRO/SERVICE/DEFAULT.ts.ftl
</#ibizinclude>
\ No newline at end of file
@CONTROL/数据看板（卡片）/template.properties 0 → 100644
浏览文件 @ 47703316
CTRLTYPE=DASHBOARD#CARD
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或