14 changed files with 538 additions and 427 deletions
@ -0,0 +1,345 @@ |
|||||
|
import { computed, Ref, ref, toRaw } from 'vue'; |
||||
|
import { Tools } from '@/platform'; |
||||
|
import { Base } from '../Base'; |
||||
|
import { Constant, PropsType, TableType } from '../index'; |
||||
|
|
||||
|
/** |
||||
|
* w-grid 列标题（表头）处理相关 |
||||
|
*/ |
||||
|
export class ColumnTitle extends Base { |
||||
|
/** |
||||
|
* 表头总行数，多表头时 > 1 |
||||
|
*/ |
||||
|
rowNum: Ref = ref(1); |
||||
|
/** |
||||
|
* 多表头集合，每一个数组为一行，每一行中包括列。 |
||||
|
* 示例：[ |
||||
|
* [{name: 'industry', label: '行业分类', colspan: 2}, {name: 'company', label: '公司名称', rowspan: 2}], |
||||
|
* [{name: 'industry2', label: '二级行业'}, {name: 'industry3', label: '三级行业'}], |
||||
|
* ] |
||||
|
*/ |
||||
|
multiTitles: Ref = ref([]); |
||||
|
/** |
||||
|
* 多表头以列名称为key的Map对象 |
||||
|
*/ |
||||
|
multiTitleMap: Map<string, MultiTitleType> = new Map<string, MultiTitleType>(); |
||||
|
/** |
||||
|
* 用户配置的原始列以列名称为key的Map对象 |
||||
|
*/ |
||||
|
originalColumnMap: Map<string, any> = new Map(); |
||||
|
/** |
||||
|
* 被锁定的列集合 |
||||
|
*/ |
||||
|
stickyColumn: Ref = ref([]); |
||||
|
/** |
||||
|
* 被锁定的最顶层的列集合 |
||||
|
*/ |
||||
|
stickyTopColumn: Ref = ref([]); |
||||
|
|
||||
|
/** |
||||
|
* 子列最大层级 |
||||
|
*/ |
||||
|
private childrenMaxLevel: number = 0; |
||||
|
/** |
||||
|
* 跨列数 |
||||
|
*/ |
||||
|
private colspan: number = 0; |
||||
|
|
||||
|
constructor(props: PropsType, table: TableType) { |
||||
|
super(props, table); |
||||
|
this.handleColumnTitle = this.handleColumnTitle.bind(this); |
||||
|
this.multiTitleThPropsHandle = this.multiTitleThPropsHandle.bind(this); |
||||
|
|
||||
|
this.showIfIsFalse = this.showIfIsFalse.bind(this); |
||||
|
this.processColumns = this.processColumns.bind(this); |
||||
|
this.processMap = this.processMap.bind(this); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 处理表头 |
||||
|
*/ |
||||
|
handleColumnTitle() { |
||||
|
this.multiTitleMap = new Map<string, MultiTitleType>(); |
||||
|
this.originalColumnMap = new Map(); |
||||
|
|
||||
|
// 深度克隆列，避免被内部操作列覆盖原有数据。
|
||||
|
const clonedArray = JSON.parse(JSON.stringify(this.table.originalColumns)); |
||||
|
clonedArray.forEach((column: any) => { |
||||
|
this.columnToMap(toRaw(column)); |
||||
|
}); |
||||
|
|
||||
|
this.childrenMaxLevel = 0; |
||||
|
this.colspan = 0; |
||||
|
const deepArr = []; |
||||
|
|
||||
|
// 剔除被隐藏的列
|
||||
|
this.originalColumnMap = this.processMap(this.originalColumnMap); |
||||
|
this.multiTitleMap = this.removeMultiTitleMap(); |
||||
|
|
||||
|
for (const key of this.originalColumnMap.keys()) { |
||||
|
// 处理列的 childrenLevel
|
||||
|
let tmpChildrenLevel = 0; |
||||
|
this.getChildrenLevel(this.originalColumnMap.get(key), 0, deepArr); |
||||
|
tmpChildrenLevel = Math.max(...deepArr); |
||||
|
if (tmpChildrenLevel > this.childrenMaxLevel) { |
||||
|
this.childrenMaxLevel = tmpChildrenLevel; |
||||
|
} |
||||
|
deepArr.splice(0, deepArr.length); |
||||
|
this.multiTitleMap.get(key)!.childrenLevel = tmpChildrenLevel; |
||||
|
|
||||
|
// 处理列的 colspan
|
||||
|
this.multiTitleMap.get(key)!.colspan = this.colspan; |
||||
|
this.colspan = 0; |
||||
|
|
||||
|
// 处理列的 parent
|
||||
|
const parent = this.findParents(this.table.originalColumns, key); |
||||
|
this.multiTitleMap.get(key)!.parents = parent; |
||||
|
|
||||
|
// 处理列的 parentLevel
|
||||
|
this.multiTitleMap.get(key)!.parentLevel = parent.length; |
||||
|
|
||||
|
// 处理列的 rowIndex
|
||||
|
this.multiTitleMap.get(key)!.rowIndex = parent.length; |
||||
|
} |
||||
|
if (this.childrenMaxLevel > 0) { |
||||
|
// 更改列头总行数 = 最大子层级数 + 1
|
||||
|
this.rowNum.value = this.childrenMaxLevel + 1; |
||||
|
} |
||||
|
|
||||
|
const map = new Map<number, [any]>(); |
||||
|
for (const key of this.multiTitleMap.keys()) { |
||||
|
const value: any = this.multiTitleMap.get(key); |
||||
|
// 得到列头总行数后处理列的 rowspan
|
||||
|
if (value.parentLevel === 0 && value.childrenLevel === 0) { |
||||
|
value.rowspan = this.rowNum.value; |
||||
|
} else if (value.parentLevel === 0) { |
||||
|
value.rowspan = 1; |
||||
|
} else { |
||||
|
// 总行数 - 父层级数 - 子层级数
|
||||
|
value.rowspan = this.rowNum.value - value.parentLevel - value.childrenLevel; |
||||
|
} |
||||
|
if (map.has(value.rowIndex)) { |
||||
|
(map.get(value.rowIndex) as any).push(value); |
||||
|
} else { |
||||
|
map.set(value.rowIndex, [value]); |
||||
|
} |
||||
|
} |
||||
|
const arr = Array.from(map); |
||||
|
|
||||
|
this.multiTitles.value = []; |
||||
|
arr.sort((a, b) => a[0] - b[0]); |
||||
|
arr.forEach((item) => { |
||||
|
this.multiTitles.value.push(item[1]); |
||||
|
}); |
||||
|
|
||||
|
this.setStickyColumn(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 多表头 th 所需的 props 处理 |
||||
|
* @param column |
||||
|
* @param scope |
||||
|
* @returns |
||||
|
*/ |
||||
|
multiTitleThPropsHandle(column: any, scope: any) { |
||||
|
if (this.table.columns?.length > 0) { |
||||
|
const i = this.table.columns.findIndex((item: any) => item['name'] === column.name); |
||||
|
if (i > -1) { |
||||
|
return scope; |
||||
|
} |
||||
|
} |
||||
|
return undefined; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 根据传入的名称，获得其在多表头集合中下标 |
||||
|
* @param name |
||||
|
* @returns |
||||
|
*/ |
||||
|
getMultiTitleIndex(name: any) { |
||||
|
let trIndex = -1; |
||||
|
let tdIndex = -1; |
||||
|
for (let tr = 0; tr < this.multiTitles.value.length; tr++) { |
||||
|
const tdArr = this.multiTitles.value[tr]; |
||||
|
let flag = false; |
||||
|
for (let td = 0; td < tdArr.length; td++) { |
||||
|
if (name === tdArr[td].name) { |
||||
|
trIndex = tr + 1; |
||||
|
tdIndex = td + 1; |
||||
|
flag = true; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
if (flag) { |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
return { trIndex: trIndex, tdIndex: tdIndex }; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获得被固定的列 |
||||
|
* @returns |
||||
|
*/ |
||||
|
getStickyColumn() { |
||||
|
const columns = <any>[]; |
||||
|
for (let i = 0; i < this.table.originalColumns.length; i++) { |
||||
|
const column = this.table.originalColumns[i]; |
||||
|
if (columns.length < this.table.configStore.stickyNum && this.originalColumnMap.get(column['name'])) { |
||||
|
columns.push(column); |
||||
|
} |
||||
|
} |
||||
|
this.stickyTopColumn.value = columns; |
||||
|
const arr = []; |
||||
|
columns.forEach((item) => { |
||||
|
this.handleStickyChildrenColumn(item, arr); |
||||
|
}); |
||||
|
return arr; |
||||
|
} |
||||
|
|
||||
|
private setStickyColumn() { |
||||
|
this.stickyColumn.value = this.getStickyColumn(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 处理被固定的孩子列 |
||||
|
* @param item |
||||
|
* @param columns |
||||
|
*/ |
||||
|
private handleStickyChildrenColumn(item, columns) { |
||||
|
columns.push(item); |
||||
|
if (item.columns && item.columns.length > 0) { |
||||
|
item.columns.forEach((children) => { |
||||
|
this.handleStickyChildrenColumn(children, columns); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private findParents(arrData: any, name: any) { |
||||
|
if (arrData.length == 0) return; |
||||
|
for (let i = 0; i < arrData.length; i++) { |
||||
|
if (arrData[i].name == name) { |
||||
|
return []; |
||||
|
} else { |
||||
|
if (arrData[i].columns) { |
||||
|
const res = this.findParents(arrData[i].columns, name); |
||||
|
if (res !== undefined) { |
||||
|
return res.concat(arrData[i].name).reverse(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private getChildrenLevel(column, deep, deepArr) { |
||||
|
if (column && column.columns && column.columns.length > 0) { |
||||
|
deep++; |
||||
|
column.columns.forEach((item) => { |
||||
|
this.getChildrenLevel(item, deep, deepArr); |
||||
|
}); |
||||
|
} else if (column) { |
||||
|
deepArr.push(deep); |
||||
|
this.colspan += 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private showIfIsFalse(name: string) { |
||||
|
const column_ = this.table.columns.find((item) => item.name === name); |
||||
|
if (!Tools.isEmpty(column_) && Tools.hasOwnProperty(column_, 'showIf') && column_.showIf === false) { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
private processColumns(columns) { |
||||
|
return columns.reduce((acc, column) => { |
||||
|
if (column.columns) { |
||||
|
column.columns = this.processColumns(column.columns); |
||||
|
if (column.columns.length > 0) { |
||||
|
acc.push(column); |
||||
|
} |
||||
|
} else if (!this.showIfIsFalse(column.name)) { |
||||
|
acc.push(column); |
||||
|
} |
||||
|
return acc; |
||||
|
}, []); |
||||
|
} |
||||
|
|
||||
|
private processMap(map: Map<string, any>) { |
||||
|
const newMap = new Map(); |
||||
|
for (const key of map.keys()) { |
||||
|
const item = map.get(key); |
||||
|
if (item.columns) { |
||||
|
item.columns = this.processColumns(item.columns); |
||||
|
if (item.columns.length > 0) { |
||||
|
newMap.set(key, item); |
||||
|
} |
||||
|
} else if (!this.showIfIsFalse(item.name)) { |
||||
|
newMap.set(key, item); |
||||
|
} |
||||
|
} |
||||
|
return newMap; |
||||
|
} |
||||
|
|
||||
|
private removeMultiTitleMap() { |
||||
|
const newMap = new Map(); |
||||
|
for (const key of this.multiTitleMap.keys()) { |
||||
|
const value: any = this.multiTitleMap.get(key); |
||||
|
if (this.originalColumnMap.get(key)) { |
||||
|
newMap.set(key, value); |
||||
|
} |
||||
|
} |
||||
|
return newMap; |
||||
|
} |
||||
|
|
||||
|
private setMap(column: any) { |
||||
|
this.originalColumnMap.set(column.name, column); |
||||
|
this.multiTitleMap.set(column.name, { |
||||
|
name: column.name, |
||||
|
label: column.label, |
||||
|
title: column.title, |
||||
|
parentLevel: 0, |
||||
|
childrenLevel: 0, |
||||
|
rowspan: 0, |
||||
|
colspan: 0, |
||||
|
rowIndex: 0, |
||||
|
style: column.style, |
||||
|
classes: column.classes, |
||||
|
parents: [], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private columnToMap(column: any) { |
||||
|
if (Tools.isEmpty(column.name)) { |
||||
|
column.name = Tools.uuid(); |
||||
|
} |
||||
|
if (Tools.isEmpty(column.label)) { |
||||
|
column.label = column.name; |
||||
|
} |
||||
|
if (column && column.columns && column.columns.length > 0) { |
||||
|
this.setMap(column); |
||||
|
column.columns.forEach((item) => { |
||||
|
this.columnToMap(item); |
||||
|
}); |
||||
|
} else { |
||||
|
this.setMap(column); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 多表头类型 |
||||
|
*/ |
||||
|
type MultiTitleType = { |
||||
|
name: string; // 列模型的name
|
||||
|
title: string; // 列模型的title(鼠标移动上去显示内容)
|
||||
|
label: string; // 列模型的label
|
||||
|
parentLevel: number; // 父层级数
|
||||
|
childrenLevel: number; // 子层级数
|
||||
|
rowspan: number; // 跨行数
|
||||
|
colspan: number; // 跨列数
|
||||
|
rowIndex: number; // 列模型所处的行下标
|
||||
|
style: any; // 列模型配置的内嵌样式
|
||||
|
classes: any; // 列模型配置的 classes
|
||||
|
parents: any; // 列模型的父name集合
|
||||
|
}; |
||||
Loading…
Reference in new issue