|
@ -20,6 +20,7 @@ |
|
|
:table-style="tableHeightComputed" |
|
|
:table-style="tableHeightComputed" |
|
|
:row-key="rowKey_" |
|
|
:row-key="rowKey_" |
|
|
:visible-columns="visibleColumnsComputed" |
|
|
:visible-columns="visibleColumnsComputed" |
|
|
|
|
|
:hide-bottom="pageable ? false : true" |
|
|
@request="onRequest" |
|
|
@request="onRequest" |
|
|
@fullscreen="tableFullscreenFun" |
|
|
@fullscreen="tableFullscreenFun" |
|
|
> |
|
|
> |
|
@ -283,6 +284,13 @@ const props = defineProps({ |
|
|
treeRelationship: { type: String, default: 'parent' }, // 树形表格模式的数据关系,包括:parent, children,当为parent时组件根据数据主键与数据外键构建树形数据,否则需要自己构建好树形数据放到children属性中。 |
|
|
treeRelationship: { type: String, default: 'parent' }, // 树形表格模式的数据关系,包括:parent, children,当为parent时组件根据数据主键与数据外键构建树形数据,否则需要自己构建好树形数据放到children属性中。 |
|
|
primaryKey: { type: String, default: 'id' }, // 数据主键(常规表格模式时,该字段可用作内置的编辑删除等功能对应的后端API入参,如:继承RestCrudController的update所需的入参。树形表格模式时,该字段为构建树数据的主键) |
|
|
primaryKey: { type: String, default: 'id' }, // 数据主键(常规表格模式时,该字段可用作内置的编辑删除等功能对应的后端API入参,如:继承RestCrudController的update所需的入参。树形表格模式时,该字段为构建树数据的主键) |
|
|
foreignKey: { type: String, default: 'parent' }, // 数据外键(常规表格模式时,该字段暂时无用,将来可用作多个表格的数据关系字段。树形表格模式时,该字段为构建树数据的关系字段) |
|
|
foreignKey: { type: String, default: 'parent' }, // 数据外键(常规表格模式时,该字段暂时无用,将来可用作多个表格的数据关系字段。树形表格模式时,该字段为构建树数据的关系字段) |
|
|
|
|
|
sortBy: { |
|
|
|
|
|
// 默认排序字段,示例:['userName', '-lastModifyDate'],其中“-”开头表示倒序。 |
|
|
|
|
|
type: Array, |
|
|
|
|
|
default: () => { |
|
|
|
|
|
return []; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
queryCriteria: { |
|
|
queryCriteria: { |
|
|
// 查询条件,查询、翻页、刷新等操作都会带上的查询条件 |
|
|
// 查询条件,查询、翻页、刷新等操作都会带上的查询条件 |
|
|
type: Object, |
|
|
type: Object, |
|
@ -470,6 +478,7 @@ watch( |
|
|
tableColumns.value = newVal; |
|
|
tableColumns.value = newVal; |
|
|
tableColumnsMap.value = arrayToMap('name', tableColumns.value); |
|
|
tableColumnsMap.value = arrayToMap('name', tableColumns.value); |
|
|
extractTableColumns.value = extractTableColumnsProps(); |
|
|
extractTableColumns.value = extractTableColumnsProps(); |
|
|
|
|
|
handlerMoreRowColumnTitle(); |
|
|
}, |
|
|
}, |
|
|
); |
|
|
); |
|
|
const queryFormFieldsMap = arrayToMap('name', props.queryFormFields); |
|
|
const queryFormFieldsMap = arrayToMap('name', props.queryFormFields); |
|
@ -933,8 +942,8 @@ const state = reactive({ |
|
|
ellipses: false, // 页面可用时显示省略号 |
|
|
ellipses: false, // 页面可用时显示省略号 |
|
|
maxPages: 5, // 一次显示的最大页面链接数;0表示无限 |
|
|
maxPages: 5, // 一次显示的最大页面链接数;0表示无限 |
|
|
}, |
|
|
}, |
|
|
sortBy: props.pagination.sortBy || '', |
|
|
sortBy: '', |
|
|
descending: props.pagination.descending || false, |
|
|
descending: false, |
|
|
reqPageStart: props.pagination.reqPageStart || 0, |
|
|
reqPageStart: props.pagination.reqPageStart || 0, |
|
|
page: 1, |
|
|
page: 1, |
|
|
rowsPerPage: props.pagination.rowsPerPage || 10, |
|
|
rowsPerPage: props.pagination.rowsPerPage || 10, |
|
@ -1011,8 +1020,8 @@ type MoreColumnTitleType = { |
|
|
parents: any; // 列模型的父name集合 |
|
|
parents: any; // 列模型的父name集合 |
|
|
}; |
|
|
}; |
|
|
// 多行列标题的记录 map |
|
|
// 多行列标题的记录 map |
|
|
const moreColumnTitleMap = new Map<string, MoreColumnTitleType>(); |
|
|
let moreColumnTitleMap = new Map<string, MoreColumnTitleType>(); |
|
|
const allColumnMap = new Map(); |
|
|
let allColumnMap = new Map(); |
|
|
|
|
|
|
|
|
// 将所有列转换到 map 中 |
|
|
// 将所有列转换到 map 中 |
|
|
const columnToMap = (column: any) => { |
|
|
const columnToMap = (column: any) => { |
|
@ -1082,6 +1091,8 @@ function findParents(arrData: any, name: any) { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const handlerMoreRowColumnTitle = () => { |
|
|
const handlerMoreRowColumnTitle = () => { |
|
|
|
|
|
moreColumnTitleMap = new Map<string, MoreColumnTitleType>(); |
|
|
|
|
|
allColumnMap = new Map(); |
|
|
tableColumns.value.forEach((tableColumn: any) => { |
|
|
tableColumns.value.forEach((tableColumn: any) => { |
|
|
columnToMap(tableColumn); |
|
|
columnToMap(tableColumn); |
|
|
}); |
|
|
}); |
|
@ -1136,6 +1147,7 @@ const handlerMoreRowColumnTitle = () => { |
|
|
} |
|
|
} |
|
|
const arr = Array.from(map); |
|
|
const arr = Array.from(map); |
|
|
|
|
|
|
|
|
|
|
|
columnTitleState.columnTitleArr = []; |
|
|
arr.sort((a, b) => a[0] - b[0]); |
|
|
arr.sort((a, b) => a[0] - b[0]); |
|
|
arr.forEach((item) => { |
|
|
arr.forEach((item) => { |
|
|
columnTitleState.columnTitleArr.push(item[1]); |
|
|
columnTitleState.columnTitleArr.push(item[1]); |
|
@ -1340,6 +1352,8 @@ const requestHandler = async (ops) => { |
|
|
} else { |
|
|
} else { |
|
|
reqParams.sortBy = ops.pagination.sortBy; |
|
|
reqParams.sortBy = ops.pagination.sortBy; |
|
|
} |
|
|
} |
|
|
|
|
|
} else if (props.sortBy && props.sortBy.length > 0) { |
|
|
|
|
|
reqParams.sortBy = props.sortBy; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 后台 RestCrudController 查询 |
|
|
// 后台 RestCrudController 查询 |
|
@ -1365,7 +1379,7 @@ const onRequest = async (ops: any) => { |
|
|
state.pagination.rowsNumber = responseData.length; |
|
|
state.pagination.rowsNumber = responseData.length; |
|
|
} else if (typeof responseData === 'object' && responseData.content) { |
|
|
} else if (typeof responseData === 'object' && responseData.content) { |
|
|
if (props.pageable) { |
|
|
if (props.pageable) { |
|
|
state.pagination.page = state.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number; |
|
|
state.pagination.page = state.pagination.reqPageStart === 0 && responseData.number === 0 ? responseData.number + 1 : responseData.number; |
|
|
state.pagination.rowsPerPage = responseData.size || state.pagination.rowsPerPage; |
|
|
state.pagination.rowsPerPage = responseData.size || state.pagination.rowsPerPage; |
|
|
} |
|
|
} |
|
|
state.pagination.rowsNumber = responseData.totalElements; |
|
|
state.pagination.rowsNumber = responseData.totalElements; |
|
|