Browse Source

【issues/7217】BasicTable树形表格设置checkStrictly无效 ---

【issues/7200】basicTable选中后没有选中样式 ---
pull/7333/head
JEECG 2 months ago
parent
commit
2af9451b7f
  1. 66
      jeecgboot-vue3/src/components/Table/src/hooks/useCustomSelection.tsx

66
jeecgboot-vue3/src/components/Table/src/hooks/useCustomSelection.tsx

@ -43,6 +43,8 @@ export function useCustomSelection(
let changeRows: Recordable[] = []; let changeRows: Recordable[] = [];
let allSelected: boolean = false; let allSelected: boolean = false;
let timer;
// 扁平化数据,children数据也会放到一起 // 扁平化数据,children数据也会放到一起
const flattedData = computed(() => { const flattedData = computed(() => {
// update-begin--author:liaozhiyang---date:20231016---for:【QQYUN-6774】解决checkbox禁用后全选仍能勾选问题 // update-begin--author:liaozhiyang---date:20231016---for:【QQYUN-6774】解决checkbox禁用后全选仍能勾选问题
@ -122,7 +124,7 @@ export function useCustomSelection(
selectedLength: flattedData.value.filter((data) => selectedKeys.value.includes(getRecordKey(data))).length, selectedLength: flattedData.value.filter((data) => selectedKeys.value.includes(getRecordKey(data))).length,
// update-begin--author:liaozhiyang---date:20240511---for:【QQYUN-9289】解决表格条数不足pageSize数量时行数全部勾选但是全选框不勾选 // update-begin--author:liaozhiyang---date:20240511---for:【QQYUN-9289】解决表格条数不足pageSize数量时行数全部勾选但是全选框不勾选
// 【TV360X-53】为空时会报错,加强判断 // 【TV360X-53】为空时会报错,加强判断
pageSize: tableData.value?.length ?? 0, pageSize: flattedData.value?.length ?? 0,
// update-end--author:liaozhiyang---date:20240511---for:【QQYUN-9289】解决表格条数不足pageSize数量时行数全部勾选但是全选框不勾选 // update-end--author:liaozhiyang---date:20240511---for:【QQYUN-9289】解决表格条数不足pageSize数量时行数全部勾选但是全选框不勾选
// 【QQYUN-6774】解决checkbox禁用后全选仍能勾选问题 // 【QQYUN-6774】解决checkbox禁用后全选仍能勾选问题
disabled: flattedData.value.length == 0, disabled: flattedData.value.length == 0,
@ -317,6 +319,7 @@ export function useCustomSelection(
function onSelect(record, checked) { function onSelect(record, checked) {
onSelectChild(record, checked); onSelectChild(record, checked);
updateSelected(record, checked); updateSelected(record, checked);
onSelectParent(record, checked);
emitChange(); emitChange();
} }
@ -339,6 +342,12 @@ export function useCustomSelection(
selectedRows.value.splice(index, 1); selectedRows.value.splice(index, 1);
} }
} }
// update-begin--author:liaozhiyang---date:20240919---for:【issues/7200】basicTable选中后没有选中样式
clearTimeout(timer);
timer = setTimeout(() => {
selectedKeys.value = [...selectedKeys.value];
}, 0);
// update-end--author:liaozhiyang---date:20240919---for:【issues/7200】basicTable选中后没有选中样式
} }
// 调用用户自定义的onChange事件 // 调用用户自定义的onChange事件
@ -372,7 +381,7 @@ export function useCustomSelection(
* @param checked * @param checked
*/ */
function onSelectChild(record, checked) { function onSelectChild(record, checked) {
if (unref(propsRef)?.isTreeTable && unref(propsRef)?.rowSelection?.checkStrictly && !isRadio.value) { if (unref(propsRef)?.isTreeTable && unref(propsRef)?.rowSelection?.checkStrictly === false && !isRadio.value) {
if (record[childrenColumnName.value] && record[childrenColumnName.value].length > 0) { if (record[childrenColumnName.value] && record[childrenColumnName.value].length > 0) {
record[childrenColumnName.value].forEach((children) => { record[childrenColumnName.value].forEach((children) => {
updateSelected(children, checked); updateSelected(children, checked);
@ -384,6 +393,59 @@ export function useCustomSelection(
} }
} }
// update-end--author:liusq---date:20240819---for:树形表格设置层级关联不生效 // update-end--author:liusq---date:20240819---for:树形表格设置层级关联不生效
/**
* 2024-09-24
* liaozhiyang
*
* issues/7217BasicTable树形表格设置checkStrictly无效
* */
function onSelectParent(record, checked) {
if (unref(propsRef)?.isTreeTable && unref(propsRef)?.rowSelection?.checkStrictly === false && !isRadio.value) {
let condition = true,
currentRecord = record;
while (condition) {
const parentRecord: any = findParent(tableData.value, currentRecord, childrenColumnName.value);
if (parentRecord) {
const childrenRecordKeys: any = [];
parentRecord[childrenColumnName.value].forEach((item) => {
childrenRecordKeys.push(getRecordKey(item));
});
if (checked === true) {
const isSubSet = childrenRecordKeys.every((item) => selectedKeys.value.includes(item));
isSubSet && updateSelected(parentRecord, checked);
} else if (checked === false) {
updateSelected(parentRecord, checked);
}
if (tableData.value.find((item) => getRecordKey(item) === getRecordKey(parentRecord))) {
// 循环终止
condition = false;
} else {
currentRecord = parentRecord;
}
} else {
// 循环终止
condition = false;
}
}
}
function findParent(tree, record, children = 'children') {
let parent = null;
function search(nodes) {
for (let node of nodes) {
if (node[children]?.some((child) => getRecordKey(child) === getRecordKey(record))) {
parent = node;
return true;
}
if (node[children] && search(node[children])) {
return true;
}
}
return false;
}
search(tree);
return parent;
}
}
// 用于判断是否是自定义选择列 // 用于判断是否是自定义选择列
function isCustomSelection(column: BasicColumn) { function isCustomSelection(column: BasicColumn) {
return column.key === CUS_SEL_COLUMN_KEY; return column.key === CUS_SEL_COLUMN_KEY;

Loading…
Cancel
Save