wangshaoping
/
platform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

表格优化提交

main
likunming 9 months ago
parent
357005764b
commit
d04fbb1a0d
1 changed files with 135 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 183
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue

183
io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
View File

@ -286,6 +286,7 @@ const props = defineProps({
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' }, // 数据外键（常规表格模式时，该字段暂时无用，将来可用作多个表格的数据关系字段。树形表格模式时，该字段为构建树数据的关系字段）
orderBy: { type: String, default: 'order' }, // 拖拽排序时传给后端修改的字段名称 orderBy: { type: String, default: 'order' }, // 拖拽排序时传给后端修改的字段名称
refreshData: { type: Boolean, default: false }, // 新增、删除、修改成功后是否刷新数据列表，默认不刷新但是新增修改后台必须返回对应的行数据对象，删除则必须返回删除的记录集primaryKey集合。
sortBy: { sortBy: {
// 默认排序字段，示例：['userName', '-lastModifyDate']，其中“-”开头表示倒序。 // 默认排序字段，示例：['userName', '-lastModifyDate']，其中“-”开头表示倒序。
type: Array, type: Array,
@ -589,7 +590,11 @@ const remove = () => {
.then((resp) => { .then((resp) => {
emit('afterRemove', resp); emit('afterRemove', resp);
NotifyManager.info(t('tip.operationSuccess')); NotifyManager.info(t('tip.operationSuccess'));
onRequest({ pagination: state.pagination }); if (props.refreshData || !props.tree) {
onRequest({ pagination: state.pagination });
} else {
removeRows(resp.data);
}
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
@ -1508,49 +1513,86 @@ const onRequest = async (ops: any) => {
} }
state.pagination.sortBy = ops.pagination.sortBy; state.pagination.sortBy = ops.pagination.sortBy;
state.pagination.descending = ops.pagination.descending; state.pagination.descending = ops.pagination.descending;
addRowKey(table.rows); setRowDataExtraProperty(table.rows);
stickyHeaderColumn(100); stickyHeaderColumn(100);
emit('afterRequestData'); emit('afterRequestData');
table.treeExpand = false; table.treeExpand = false;
}; };
const addRowKey = (rows: []) => { /**
* 行数据附加属性名称
*/
const rowDataExtraPropertyName = {
rowKey: rowKey_, // 前端行数据ID
ticked: table.tickedField, // 行数据勾选状态
selected: table.selectedField, // 行数据选中状态
expand: 'expand', // 树表格行数据展开状态
tickedCount: '_tickedCount', // 行数据用于处理父节点勾选状态的属性（记录自身勾选数量，要么为0要么为1）
childrenTickedCount: '_childrenTickedCount', // 行数据用于处理父节点勾选状态的属性（记录子节点勾选数量）
};
/**
* 初始化行数据附加属性
* @param rowData 行数据对象
*/
const initRowDataExtraProperty = (rowData) => {
rowData[rowDataExtraPropertyName.rowKey] = Tools.uuid();
rowData[rowDataExtraPropertyName.ticked] = rowData[rowDataExtraPropertyName.ticked] || false;
rowData[rowDataExtraPropertyName.selected] = rowData[rowDataExtraPropertyName.selected] || false;
if (props.tree && Tools.isEmpty(rowData[rowDataExtraPropertyName.expend])) {
rowData[rowDataExtraPropertyName.expend] = false;
}
};
/**
* 设置行数据附加属性
* @param rows 数据行集合
*/
const setRowDataExtraProperty = (rows: []) => {
if (rows && rows.length > 0) { if (rows && rows.length > 0) {
rows.forEach((item: any, index) => { rows.forEach((item: any, index) => {
item[rowKey_] = Tools.uuid(); initRowDataExtraProperty(item);
if (item[table.tickedField] === true) { if (item[rowDataExtraPropertyName.ticked] === true) {
item['_tickedCount'] = 1; item[rowDataExtraPropertyName.tickedCount] = 1;
} else if (item['_tickedCount'] === false) { } else if (item[rowDataExtraPropertyName.tickedCount] === false) {
item['_tickedCount'] = 0; item[rowDataExtraPropertyName.tickedCount] = 0;
} else { } else {
item['_tickedCount'] = 0; item[rowDataExtraPropertyName.tickedCount] = 0;
}
item[table.tickedField] = item[table.tickedField] || false;
item[table.selectedField] = item[table.selectedField] || false;
if (props.tree) {
item['expand'] = false;
} }
if (props.tree && item.children && item.children.length > 0) { if (props.tree && item.children && item.children.length > 0) {
addRowKey(item.children); setRowDataExtraProperty(item.children);
item['_childrenTickedCount'] = 0; item[rowDataExtraPropertyName.childrenTickedCount] = 0;
item.children.forEach((child) => { item.children.forEach((child) => {
item['_childrenTickedCount'] += child['_tickedCount']; item[rowDataExtraPropertyName.childrenTickedCount] += child[rowDataExtraPropertyName.tickedCount];
}); });
if (item['_childrenTickedCount'] === 0) { if (item[rowDataExtraPropertyName.childrenTickedCount] === 0) {
item[table.tickedField] = false; item[rowDataExtraPropertyName.ticked] = false;
item['_tickedCount'] = 0; item[rowDataExtraPropertyName.tickedCount] = 0;
} else if (item['_childrenTickedCount'] === item.children.length) { } else if (item[rowDataExtraPropertyName.childrenTickedCount] === item.children.length) {
item[table.tickedField] = true; item[rowDataExtraPropertyName.ticked] = true;
item['_tickedCount'] = 1; item[rowDataExtraPropertyName.tickedCount] = 1;
} else { } else {
item[table.tickedField] = null; item[rowDataExtraPropertyName.ticked] = null;
item['_tickedCount'] = 0; item[rowDataExtraPropertyName.tickedCount] = 0;
} }
} }
}); });
} }
}; };
const addData = (rowData) => {
if (props.tree) {
addTreeRow(rowData);
} else {
addRow(rowData, false);
}
};
const updateData = (rowData) => {
rowData[rowKey_] = getSelectedRowsComputed.value[0][rowKey_];
if (getSelectedRowsComputed.value[0]['children']) {
rowData['children'] = getSelectedRowsComputed.value[0]['children'];
}
replaceRow(rowData);
};
const save = async () => { const save = async () => {
dialog.dialogButtons[0].loading = true; dialog.dialogButtons[0].loading = true;
const formStatus = dialogFormRef.value.getStatus(); const formStatus = dialogFormRef.value.getStatus();
@ -1600,7 +1642,13 @@ const save = async () => {
emit('afterEditorDataSubmit', resp.data); emit('afterEditorDataSubmit', resp.data);
NotifyManager.info(t('tip.operationSuccess')); NotifyManager.info(t('tip.operationSuccess'));
dialogRef.value.hide(); dialogRef.value.hide();
onRequest({ pagination: state.pagination }); if (props.refreshData || !props.tree) {
onRequest({ pagination: state.pagination });
} else if (resp.data && (formStatus === PageStatusEnum.新增 || formStatus === 'clone' || formStatus === 'addTop' || formStatus === 'addChild')) {
addData(resp.data);
} else if (resp.data) {
updateData(resp.data);
}
}) })
.catch((error) => { .catch((error) => {
const response = error?.response; const response = error?.response;
@ -1702,7 +1750,7 @@ const setLocalData = (rows: any) => {
} else { } else {
table.rows = rows; table.rows = rows;
} }
addRowKey(table.rows); setRowDataExtraProperty(table.rows);
state.pagination.rowsNumber = table.rows.length; state.pagination.rowsNumber = table.rows.length;
stickyHeaderColumn(); stickyHeaderColumn();
}; };
@ -1722,18 +1770,33 @@ const replaceRow = (row) => {
replaceRowHandler(table.rows, row); replaceRowHandler(table.rows, row);
}; };
const removeTreeRows = (arr, rowIds) => {
arr.forEach((item, index) => {
if (rowIds.includes(item[props.primaryKey])) {
arr.splice(index, 1);
} else if (item.children && item.children.length > 0) {
removeTreeRows(item.children, rowIds);
}
});
};
// 删除选中数据 // 删除选中数据
const removeRows = (rows) => { const removeRows = (rows) => {
rows.forEach((item) => { if (props.tree) {
table.rows.splice( removeTreeRows(table.rows, rows);
table.rows.findIndex((v) => { setRowDataExtraProperty(table.rows);
return v[rowKey_] === item[rowKey_]; } else {
}), rows.forEach((item) => {
1, table.rows.splice(
); table.rows.findIndex((v) => {
}); return v[rowKey_] === item[rowKey_];
state.pagination.rowsNumber = table.rows.length; }),
stickyHeaderColumn(); 1,
);
});
state.pagination.rowsNumber = table.rows.length;
stickyHeaderColumn();
}
}; };
// 新增一行数据 // 新增一行数据
const addRow = (row, index) => { const addRow = (row, index) => {
@ -1742,14 +1805,32 @@ const addRow = (row, index) => {
} else { } else {
table.rows.splice(index, 0, row); table.rows.splice(index, 0, row);
} }
addRowKey(table.rows); setRowDataExtraProperty(table.rows);
state.pagination.rowsNumber = table.rows.length; state.pagination.rowsNumber = table.rows.length;
stickyHeaderColumn(); stickyHeaderColumn();
}; };
// 新增树表格中的数据
const addTreeRow = (row) => {
if (Tools.isEmpty(row[props.foreignKey])) {
table.rows.push(row);
} else {
const parent = getTreeRow(table.rows, row[props.foreignKey], true);
if (parent) {
if (parent['children'] && Array.isArray(parent['children'])) {
parent['children'].push(row);
} else {
parent['children'] = [row];
}
}
setRowDataExtraProperty(table.rows);
}
};
const getSelectRowsByFieldName = (arr, selectedRows, fieldName) => { const getSelectRowsByFieldName = (arr, selectedRows, fieldName, containsNullStatus: boolean = false) => {
arr.forEach((item) => { arr.forEach((item) => {
if (item[fieldName]) { if (containsNullStatus && (item[fieldName] || item[fieldName] === null)) {
selectedRows.push(item);
} else if (item[fieldName]) {
selectedRows.push(item); selectedRows.push(item);
} }
if (props.tree && item.children && item.children.length > 0) { if (props.tree && item.children && item.children.length > 0) {
@ -1781,9 +1862,9 @@ const getSelectedRows = () => {
return toRaw(selectedRows); return toRaw(selectedRows);
}; };
// 获得checkbox勾选的第一条记录 // 获得checkbox勾选的第一条记录
const getTickedRow = () => { const getTickedRow = (containsNullStatus: boolean = false) => {
const tickedRows = []; const tickedRows = [];
getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField); getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField, containsNullStatus);
if (tickedRows && tickedRows.length > 0) { if (tickedRows && tickedRows.length > 0) {
return toRaw(tickedRows)[0]; return toRaw(tickedRows)[0];
} else { } else {
@ -1791,9 +1872,9 @@ const getTickedRow = () => {
} }
}; };
// 获得checkbox勾选的所有记录 // 获得checkbox勾选的所有记录
const getTickedRows = () => { const getTickedRows = (containsNullStatus: boolean = false) => {
const tickedRows = []; const tickedRows = [];
getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField); getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField, containsNullStatus);
return toRaw(tickedRows); return toRaw(tickedRows);
}; };
@ -2455,15 +2536,21 @@ const getCascadeChildrenData = (rows: [], propertyName) => {
const getCascadeChildren = (propertyName: string) => { const getCascadeChildren = (propertyName: string) => {
return getCascadeChildrenData([getSelectedRow()], propertyName); return getCascadeChildrenData([getSelectedRow()], propertyName);
}; };
const getRow = (arr, key, parent) => { /**
* 获取树表格中的行记录
* @param arr 查找的记录集
* @param key 查找的 rowKey_
* @param parentFlag 根据 foreignKey 查找记录标识
*/
const getTreeRow = (arr, key, parentFlag: boolean) => {
let result = undefined; let result = undefined;
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
let item = arr[i]; let item = arr[i];
if (parent ? item[props.primaryKey] === key : item[rowKey_] === key) { if (parentFlag ? item[props.primaryKey] === key : item[rowKey_] === key) {
result = item; result = item;
break; break;
} else if (item.children && item.children.length > 0) { } else if (item.children && item.children.length > 0) {
const temp = getRow(item.children, key, parent); const temp = getTreeRow(item.children, key, parentFlag);
if (temp) { if (temp) {
result = temp; result = temp;
} }
@ -2474,7 +2561,7 @@ const getRow = (arr, key, parent) => {
const getCascadeParentData = (row, propertyName) => { const getCascadeParentData = (row, propertyName) => {
const data = <any>[]; const data = <any>[];
if (row && row[props.foreignKey]) { if (row && row[props.foreignKey]) {
const parent = getRow(table.rows, row[props.foreignKey], true); const parent = getTreeRow(table.rows, row[props.foreignKey], true);
if (parent) { if (parent) {
data.push(propertyName ? parent[propertyName] : parent); data.push(propertyName ? parent[propertyName] : parent);
if (parent[props.foreignKey]) { if (parent[props.foreignKey]) {

Write Preview
Loading…
Cancel
Save