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

看板视图支持看板展开与收缩

上级 e57c1f14
...@@ -11,7 +11,15 @@ ${ctrl.render.code} ...@@ -11,7 +11,15 @@ ${ctrl.render.code}
<#if ctrl.groupRender??> <#if ctrl.groupRender??>
${ctrl.groupRender.code} ${ctrl.groupRender.code}
<#else> <#else>
<div :key="group + index" class="dataview-group-content" style="<#if ctrl.getGroupWidth() gt 0>width: ${ctrl.getGroupWidth()?c}px;<#else>flex-grow: 1;</#if>"> <div :key="index" class="dataview-group-folading-kanban">
<div class="dataview-group-icon">
<Icon :type="group.folding ? 'md-arrow-dropright' : 'md-arrow-dropleft'" size="25" @click="onClick(group,index)"/>
</div>
<div class="dataview-group-folding">
<span>{{getGroupText(group.name)}}({{group.items.length}})</span>
</div>
</div>
<div :key="group + index" class="dataview-group-content dataview-group-kanban" style="<#if ctrl.getGroupWidth() gt 0>width: ${ctrl.getGroupWidth()?c}px;<#else>flex-grow: 1;</#if>">
<div class="dataview-group-header<#if ctrl.getGroupPSSysCss()??> ${ctrl.getGroupPSSysCss().getCssName()}</#if>"> <div class="dataview-group-header<#if ctrl.getGroupPSSysCss()??> ${ctrl.getGroupPSSysCss().getCssName()}</#if>">
{{ getGroupText(group.name) }} {{ getGroupText(group.name) }}
<#if ctrl.getGroupPSUIActionGroup()??> <#if ctrl.getGroupPSUIActionGroup()??>
...@@ -731,6 +739,24 @@ draggable, ...@@ -731,6 +739,24 @@ draggable,
this.$emit('selectionchange', this.selections); this.$emit('selectionchange', this.selections);
} }
/**
* 点击时触发看板的展开和收起
*
* @param group 分组看板
* @param index 分组看板编号
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public onClick(group: any,index: number){
group.folding = !group.folding;
let kanban: any = this.$el.getElementsByClassName('dataview-group-kanban')[index];
if(group.folding){
kanban.style.display="none";
}else{
kanban.style.display="block";
}
this.$forceUpdate();
}
/** /**
* 界面行为 * 界面行为
* *
......
...@@ -2,6 +2,24 @@ ...@@ -2,6 +2,24 @@
height: 100%; height: 100%;
display: flex; display: flex;
overflow: auto; overflow: auto;
.dataview-group-folading-kanban{
border: 1px solid #ddd;
text-align: center;
border-left: 0;
height: 100%;
width: 40px;
background-color: #d8d8d8;
color: #a5a5a5;
.dataview-group-icon{
padding: 6px 0;
}
.dataview-group-folding{
height: calc(100% - 39px);
writing-mode: tb;
width: 31px;
font-size: 17px;
}
}
.dataview-group-content { .dataview-group-content {
border: 1px solid #ddd; border: 1px solid #ddd;
border-left: 0; border-left: 0;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册