提交 ef753f43 编写于 作者: Shine-zwj's avatar Shine-zwj

数据视图批量操作栏样式

上级 e2f0d18f
......@@ -128,12 +128,15 @@
<el-backtop target=".content-container .app-data-view"></el-backtop>
<#if ctrl.getBatchPSDEToolbar?? && ctrl.getBatchPSDEToolbar()??>
<row class='dataview-pagination' v-if="selections.length > 0">
<span class="batch-toolbar">
<div v-show="flag" class="batch-toolbar">
<#assign batchToolbar = ctrl.getBatchPSDEToolbar()/>
<@ibizindent blank=12>
${P.getCtrlCode(batchToolbar, 'CONTROL.html').code}
</@ibizindent>
</span>
</div>
<div class="dataview-pagination-icon">
<Icon type="md-code-working" @click="onClick"/>
</div>
</row>
</#if>
</div>
......@@ -501,6 +504,24 @@ import CodeListService from "@/codelist/codelist-service";
*/
public appStateEvent: Subscription | undefined;
/**
* 默认隐藏批量操作工具栏
*
* @type {boolean}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public flag: boolean = false;
/**
* 更改批量操作工具栏显示状态
*
* @param $event
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public onClick($event: any){
this.flag = !this.flag;
}
/**
* 排序点击事件
* @param {string} field 属性名
......@@ -552,13 +573,15 @@ import CodeListService from "@/codelist/codelist-service";
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public afterMounted(){
<#if ctrl.isEnablePagingBar()>
this.$el.addEventListener('scroll', ()=> {
let el: any = this.$el.getElementsByClassName('dataview-pagination')[0];
el.style.top = -655 + this.$el.scrollTop + 'px';
<#if ctrl.isEnablePagingBar()>
if( this.$el.scrollTop + this.$el.clientHeight >= this.$el.scrollHeight) {
this.loadMore();
}
})
</#if>
})
}
/**
......
......@@ -163,16 +163,35 @@
}
<#if ctrl.getBatchPSDEToolbar?? && ctrl.getBatchPSDEToolbar()??>
.dataview-pagination {
position: fixed;
background-color: #fff;
height: 50px;
bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
right: 42px;
top: -655px;
text-align: center;
font-size: 20px;
z-index: 5;
}
.batch-toolbar{
float: right;
}
.dataview-pagination-icon{
width: 30px;
height: 30px;
position: absolute;
right: -36px;
top: 4px;
float: right;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border:1px solid #dcdee2;
border-radius: 50%;
background-color: #FFF;
margin: 3px;
}
.dataview-pagination-icon:hover{
background-color: #409eff;
color: #fff;
}
</#if>
}
<#ibizinclude>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册