Skip to content

iBiz-Vue-R7
iBiz-Vue-R7
提交 b1381d5a 编写于 作者: tony001's avatar tony001
浏览文件
操作

表格分组

上级 da36b745
隐藏空白字符变更
内嵌 并排
正在显示 包含 327 行增加 和 20 行删除
@CONTROL/表格/CONTROL-BASE.vue#COLUMN.ftl
浏览文件 @ b1381d5a
......@@ -117,7 +117,7 @@
<span>${item.render.code}</span>
<#-- END：列绘制 -->
<#else>
<template v-if="actualIsOpenEdit">
<template v-if="actualIsOpenEdit && !row.children">
<app-form-item :error="gridItemsModel[$index][column.property].error">
${P.getEditorCode(item, "GRIDEIDTOR.vue").code}
</app-form-item>
......
@CONTROL/表格/CONTROL-BASE.vue.ftl
浏览文件 @ b1381d5a
......@@ -21,6 +21,11 @@ ${ctrl.render.code}
:highlight-current-row ="isSingleSelect"
:row-class-name="getRowClassName"
:cell-class-name="getCellClassName"
<#if ctrl.isEnableGroup()>
:span-method="arraySpanMethod"
:tree-props="{children: 'children', hasChildren: 'children.length>0'}"
row-key="groupById"
</#if>
<#if ctrl.isEnablePagingBar()>
max-height="items.length > 0 ? 'calc(100%-50px)' : '100%'"
<#else>
......@@ -28,7 +33,7 @@ ${ctrl.render.code}
</#if>
@row-click="rowClick($event)"
@select-all="selectAll($event)"
@select="select($event)"
@select="select"
@row-class-name="onRowClassName($event)"
@row-dblclick="rowDBLClick($event)"
ref='multipleTable' :data="items" :show-header="!isHideHeader">
......@@ -46,6 +51,15 @@ ${ctrl.render.code}
<template v-if="!isSingleSelect">
<el-table-column align="center" type='selection' :width="checkboxColWidth"></el-table-column>
</template>
<#if ctrl.isEnableGroup()>
<template>
<el-table-column show-overflow-tooltip prop="group" label="分组" :min-width="80">
<template v-slot="{row,column,$index}">
<span>{{ row.group }}</span>
</template>
</el-table-column>
</template>
</#if>
<#assign adaptationColu = true/>
<#list ctrl.getPSDEGridColumns() as column>
<@ibizindent blank=12>
......@@ -540,6 +554,30 @@ import { Environment } from '@/environments/environment';
*/
public gridItemsModel: any[] = [];
/**
* 是否启用分组
*
* @type {boolean}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public isEnableGroup:boolean = ${ctrl.isEnableGroup()?c};
/**
* 分组属性
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public groupAppField:string ="<#if ctrl.getGroupPSDEField()??>${ctrl.getGroupPSDEField().getCodeName()?lower_case}</#if>";
/**
* 分组模式
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public groupMode:string ="<#if ctrl.getGroupMode()??>${ctrl.getGroupMode()}</#if>";
/**
* 获取界面行为权限状态
*
......@@ -745,6 +783,9 @@ import { Environment } from '@/environments/environment';
<#if ctrl.getAggMode() == "ALL">
this.getAggData();
</#if>
<#if ctrl.isEnableGroup()>
this.drawGroup();
</#if>
}).catch((response: any) => {
if (response && response.status === 401) {
return;
......@@ -1262,6 +1303,10 @@ import { Environment } from '@/environments/environment';
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public rowDBLClick($event: any): void {
// 分组行跳过
if($event && $event.children && $event.children.length >0){
return;
}
if (!$event || this.actualIsOpenEdit || Object.is(this.gridRowActiveMode,0)) {
return;
}
......@@ -1279,33 +1324,202 @@ import { Environment } from '@/environments/environment';
}
/**
* 复选框数据选中
* 合并分组行
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public arraySpanMethod({row, column, rowIndex, columnIndex} : any) {
let allColumns:Array<any> = [<#if ctrl.getPSDEGridColumns()??><#list ctrl.getPSDEGridColumns() as singleColumn>'${singleColumn.getCodeName()}'<#if singleColumn_has_next>,</#if></#list></#if>];
if(row && row.children && row.children.length>0 && columnIndex >= (this.isSingleSelect ? 0:1)) {
return [1, allColumns.length];
}
}
/**
* 绘制分组
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public drawGroup(){
if(!this.isEnableGroup) return;
// 分组
let allGroup: Array<any> = [];
this.items.forEach((item: any)=>{
if(item.hasOwnProperty(this.groupAppField)){
allGroup.push(item[this.groupAppField]);
}
});
let groupTree:Array<any> = [];
allGroup = [...new Set(allGroup)];
// 组装数据
allGroup.forEach((group: any, groupIndex: number)=>{
let children:Array<any> = [];
this.items.forEach((item: any,itemIndex: number)=>{
if(Object.is(group,item[this.groupAppField])){
item.groupById = Number((groupIndex+1) * 10 + (itemIndex+1) * 1);
item.group = '';
children.push(item);
}
});
group = group ? group : '其他';
const tree: any ={
groupById: Number((groupIndex+1)*10),
group: group,
<#if ctrl.getPSDEGridColumns()??>
<#list ctrl.getPSDEGridColumns() as singleColumn>
<#if singleColumn.getColumnType()?? && singleColumn.getColumnType() == "UAGRIDCOLUMN">
<#if singleColumn.getPSDEUIActionGroup()?? && singleColumn.getPSDEUIActionGroup().getPSUIActions()??>
<#list singleColumn.getPSDEUIActionGroup().getPSUIActions() as singleUIAction>
${singleUIAction.getCodeName()}:{
visabled: false
},
</#list>
</#if>
<#else>
${singleColumn.getCodeName()}:'',
</#if>
</#list>
</#if>
children: children,
}
groupTree.push(tree);
});
this.items = groupTree;
if(this.actualIsOpenEdit) {
for(let i = 0; i < this.items.length; i++) {
this.gridItemsModel.push(this.getGridRowModel());
}
}
}
/**
* 单个复选框选中
*
* @param {*} $event
* @returns {void}
* @param {*} selection 所有选中行数据
* @param {*} row 当前选中行数据
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public select($event: any): void {
if (!$event) {
return;
public select(selection: any, row: any): void {
if(this.groupAppField) {
let isContain:boolean = selection.some((item:any) =>{
return item == row;
})
// 是否选中当前行，选中为true，否则为false
if(isContain) {
// 当前行为分组行
if(row.children && row.children.length > 0) {
this.toggleSelection(row.children, true);
row.children.forEach((children: any) => {
this.selections.push(children);
});
} else {
this.selections.push(row);
}
} else {
if(row.children && row.children.length > 0) {
this.toggleSelection(row.children, false);
this.selections = this.computeCheckedData(this.selections, row.children);
} else {
this.selections = this.computeCheckedData(this.selections, row);
}
}
this.selections = [...new Set(this.selections)]
} else {
if(!selection) {
return;
}
this.selections = [...JSON.parse(JSON.stringify(selection))];
}
this.selections = [];
this.selections = [...JSON.parse(JSON.stringify($event))];
this.$emit('selectionchange', this.selections);
}
/**
* 计算当前选中数据
*
* @param {*} selectionArray 所有选中行数据
* @param {*} cancelData 被取消选中行数据，分组行为数组，非分组行为对象
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public computeCheckedData(selectionArray: any[], cancelData: Array<any> | any) {
let targetArray: Array<any> = [];
// 分组行
if(Array.isArray(cancelData)) {
if(selectionArray && selectionArray.length > 0) {
selectionArray.forEach((selection:any) =>{
let tempFlag:boolean = true;
cancelData.forEach((child:any) =>{
if(selection.groupById===child.groupById){
tempFlag = false;
}
})
if(tempFlag) targetArray.push(selection);
})
}
} else {
// 非分组行
if(selectionArray && selectionArray.length > 0) {
selectionArray.forEach((selection:any) =>{
let tempFlag:boolean = true;
if(selection.groupById===cancelData.groupById){
tempFlag = false;
}
if(tempFlag) targetArray.push(selection);
})
}
}
return targetArray;
}
/**
* 设置非分组行checkbox选中状态
*
* @param {*} rows 选中数据数组
* @param {boolean} flag 是否选中
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public toggleSelection(rows?: any, flag?: boolean) {
if(rows) {
rows.forEach((row:any) => {
(this.$refs.multipleTable as any).toggleRowSelection(row, flag);
});
} else {
(this.$refs.multipleTable as any).clearSelection();
}
}
/**
* 复选框数据全部选中
*
* @param {*} $event
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public selectAll($event: any): void {
if (!$event) {
return;
public selectAll(selection: any): void {
this.selections = [];
if(this.groupAppField) {
let flag: boolean = true;
if(selection && selection.length === this.items.length) {
selection.forEach((element: any) => {
if(element.children && element.children.length > 0) {
this.toggleSelection(element.children, flag);
element.children.forEach((children: any) => {
this.selections.push(children);
});
} else {
flag = false;
}
});
} else {
flag = false;
}
if(!flag) {
this.toggleSelection();
}
} else {
if(!selection) {
return;
}
this.selections = [...JSON.parse(JSON.stringify(selection))];
}
this.selections = [];
this.selections = [...JSON.parse(JSON.stringify($event))];
this.$emit('selectionchange', this.selections);
}
......@@ -1318,6 +1532,10 @@ import { Environment } from '@/environments/environment';
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public rowClick($event: any, ifAlways: boolean = false): void {
// 分组行跳过
if($event && $event.children && $event.children.length >0){
return;
}
if (!ifAlways && (!$event || this.actualIsOpenEdit)) {
return;
}
......@@ -1874,24 +2092,59 @@ import { Environment } from '@/environments/environment';
}
/**
* 获取对应列class
* 获取对应单元格class
*
* @param {*} $args row 行数据，column 列数据，rowIndex 行索引，列索引
* @param {*} $args row 行数据，column 列数据，rowIndex 行索引，columnIndex 列索引
* @returns {void}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public getCellClassName(args:{row: any, column: any, rowIndex: number, columnIndex:number}){
let className: string = '';
if(args.column.property){
let col = this.allColumns.find((item:any)=>{
return Object.is(args.column.property,item.name);
})
if(col !== undefined){
if(col.isEnableRowEdit && this.actualIsOpenEdit ){
return 'edit-cell';
className += 'edit-cell ';
}
} else {
className += 'info-cell';
}
}
return 'info-cell';
if(this.groupAppField && args.columnIndex === 0 && !this.isSingleSelect) {
if(args.row.children && args.row.children.length > 0) {
className += this.computeGroupRow(args.row.children, args.row);
}
}
return className;
}
/**
* 计算分组行checkbox选中样式
*
* @param {*} rows 当前分组行下的所有数据
* @returns {*} currentRow 当前分组行
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public computeGroupRow(rows: any[], currentRow: any) {
let count: number = 0;
this.selections.forEach((select: any) => {
rows.forEach((row: any) => {
if(row.groupById === select.groupById) {
count++;
}
})
})
if(count === rows.length) {
(this.$refs.multipleTable as any).toggleRowSelection(currentRow, true);
return 'cell-select-all ';
} else if(count !== 0 && count < rows.length) {
return 'cell-indeterminate '
} else if(count === 0) {
(this.$refs.multipleTable as any).toggleRowSelection(currentRow, false);
return '';
}
}
/**
......
@CONTROL/表格/CONTROL.less.ftl
浏览文件 @ b1381d5a
......@@ -116,8 +116,62 @@
}
}
}
.cell-indeterminate {
>div>label {
>span {
.el-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.el-checkbox__inner:before {
content: "";
position: absolute;
display: block;
background-color: #fff;
height: 2px;
transform: scale(.5);
left: 0;
right: 0;
top: 5px;
}
}
>span.is-checked {
.el-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.el-checkbox__inner:after {
border: 0px;
}
}
}
}
.cell-select-all {
>div>label {
>span {
.el-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.el-checkbox__inner:after {
box-sizing: content-box;
content: "";
border: 1px solid #fff;
border-left: 0;
border-top: 0;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(1);
width: 3px;
transition: transform .15s ease-in .05s;
transform-origin: center;
}
}
}
}
<#ibizinclude>
../@MACRO/CSS/DEFAULT.less.ftl
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或