提交 e3a803c6 编写于 作者: Mosher's avatar Mosher

调整看板视图拖拽逻辑

上级 c6ab9780
...@@ -11,14 +11,16 @@ ${ctrl.render.code} ...@@ -11,14 +11,16 @@ ${ctrl.render.code}
<#if ctrl.groupRender??> <#if ctrl.groupRender??>
${ctrl.groupRender.code} ${ctrl.groupRender.code}
<#else> <#else>
<div :key="index" class="dataview-group-folading-kanban" @click="onClick(group,index)"> <draggable :key="index" :list="group.items" class="dragbar" ghostClass="dragitems" handle=".dataview-group-item" :group="{name: 'bar', put: group.folding ? false:true}" @change="onDragChange($event,group.value)">
<div class="unfold-icon"> <div v-show="!group.folding" :key="index" class="dataview-group-folading-kanban" @click="onClick(group,index)">
<i class="el-icon-s-unfold" :title="$t('app.kanban.unfold')"></i> <div class="unfold-icon">
</div> <i class="el-icon-s-unfold" :title="$t('app.kanban.unfold')"></i>
<div class="dataview-group-folding"> </div>
<span>{{getGroupText(group.value)}}({{group.items.length}})</span> <div class="dataview-group-folding">
<span>{{getGroupText(group.value)}}({{group.items.length}})</span>
</div>
</div> </div>
</div> </draggable>
<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 :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>">
<div class="fold-icon" @click="onClick(group,index)"> <div class="fold-icon" @click="onClick(group,index)">
...@@ -51,7 +53,7 @@ ${ctrl.render.code} ...@@ -51,7 +53,7 @@ ${ctrl.render.code}
</Poptip> </Poptip>
</#if> </#if>
</div> </div>
<draggable :list="group.items" group="${ctrl.name}" class="dataview-group-items" @change="onDragChange($event, group.value)"> <draggable v-show="group.folding" :list="group.items" group="${ctrl.name}" class="dataview-group-items" @change="onDragChange($event, group.value)">
<div v-for="(item, i) in group.items" :key="i" :class="{'dataview-group-item': true, 'is-select': item.isselected}" @click="handleClick(item)" @dblclick="handleDblClick(item)"> <div v-for="(item, i) in group.items" :key="i" :class="{'dataview-group-item': true, 'is-select': item.isselected}" @click="handleClick(item)" @dblclick="handleDblClick(item)">
<#if ctrl.getItemPSLayoutPanel()??> <#if ctrl.getItemPSLayoutPanel()??>
<#assign panel = ctrl.getItemPSLayoutPanel()> <#assign panel = ctrl.getItemPSLayoutPanel()>
...@@ -650,6 +652,7 @@ draggable, ...@@ -650,6 +652,7 @@ draggable,
* @memberof ${srfclassname('${ctrl.codeName}')}Base * @memberof ${srfclassname('${ctrl.codeName}')}Base
*/ */
public async setGroups() { public async setGroups() {
let tempGroups: Array<any> = this.groups;
if(!this.isGroup || !this.groupField || Object.is(this.groupMode, 'NONE')) { if(!this.isGroup || !this.groupField || Object.is(this.groupMode, 'NONE')) {
return; return;
} }
...@@ -657,10 +660,12 @@ draggable, ...@@ -657,10 +660,12 @@ draggable,
this.groups = []; this.groups = [];
this.items.forEach(item => { this.items.forEach(item => {
let group: any = this.groups.find((group: any) => Object.is(group.name, item[this.groupField])); let group: any = this.groups.find((group: any) => Object.is(group.name, item[this.groupField]));
let state: any = tempGroups.filter((temp: any) => Object.is(item[this.groupField], temp.value))[0];
if(!group) { if(!group) {
this.groups.push({ this.groups.push({
name: item[this.groupField], name: item[this.groupField],
value: item[this.groupField], value: item[this.groupField],
folding: (state && !state.folding) ? state.folding : true,
items: this.getGroupItems(item[this.groupField]) items: this.getGroupItems(item[this.groupField])
}) })
} }
...@@ -672,9 +677,11 @@ draggable, ...@@ -672,9 +677,11 @@ draggable,
this.allCodeList = Util.deepCopy(codelistItems); this.allCodeList = Util.deepCopy(codelistItems);
if(codelistItems && codelistItems.length >0) { if(codelistItems && codelistItems.length >0) {
codelistItems.forEach((item: any) => { codelistItems.forEach((item: any) => {
let state: any = tempGroups.filter((temp: any) => Object.is(item.value, temp.value))[0];
this.groups.push({ this.groups.push({
name: item.value, name: item.value,
value: item.value, value: item.value,
folding: (state && !state.folding) ? state.folding : true,
items: this.getGroupItems(item.value) items: this.getGroupItems(item.value)
}) })
}) })
...@@ -774,15 +781,6 @@ draggable, ...@@ -774,15 +781,6 @@ draggable,
*/ */
public onClick(group: any,index: number){ public onClick(group: any,index: number){
group.folding = !group.folding; group.folding = !group.folding;
let kanban: any = this.$el.getElementsByClassName('dataview-group-kanban')[index];
let foldkanban: any = this.$el.getElementsByClassName('dataview-group-folading-kanban')[index];
if(group.folding){
kanban.style.display="none";
foldkanban.style.display="block";
}else{
kanban.style.display="block";
foldkanban.style.display="none";
}
this.$forceUpdate(); this.$forceUpdate();
} }
......
...@@ -83,6 +83,19 @@ ...@@ -83,6 +83,19 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.dragitems {
z-index: -1 !important;
margin: 0px !important;
border: none !important;
padding: 0px !important;
height: 0px !important;
.app-layoutpanel {
.app-layoutpanel-container {
padding: 0px !important;
}
}
}
} }
<#ibizinclude> <#ibizinclude>
../@MACRO/CSS/DEFAULT.less.ftl ../@MACRO/CSS/DEFAULT.less.ftl
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册