// 渲染数据
const [rows, setRows] = useState<any>(
[
[
{
id: '01',
dongzuoid: 'dz01',
guizeId: '1',
yuzhiId: 'lucy',
yuzhiVal: '12',
dongzuoname: '业务单元时间',
type: "类型时间",
guizeArr: [
{
key: '1',
val: '最早时间',
},
{
key: '2',
val: '最近',
},
{
key: '3',
val: '无',
},
],
yuzhiArr: [
{
key: 'jack',
val: 'Jack',
},
{
key: 'lucy',
val: 'Lucy',
},
{
key: 'Yiminghe',
val: 'yiminghe',
},
],
},
],
[
{
id: '04',
dongzuoid: 'dz04',
guizeId: '1',
yuzhiId: 'lucy',
yuzhiVal: '12',
dongzuoname: '业务单元枚举',
type: "类型枚举",
guizeArr: [
{
key: '1',
val: '无',
},
],
yuzhiArr: [
{
key: 'jack',
val: 'Jack',
},
{
key: 'lucy',
val: 'Lucy',
},
{
key: 'Yiminghe',
val: 'yiminghe',
},
],
},
{
id: '05',
dongzuoid: 'dz01',
guizeId: '1',
yuzhiId: 'lucy',
yuzhiVal: '12',
dongzuoname: '业务单元时间',
type: "类型时间",
guizeArr: [
{
key: '1',
val: '最早时间',
},
{
key: '2',
val: '最近',
},
{
key: '3',
val: '无',
},
],
yuzhiArr: [
{
key: 'jack',
val: 'Jack',
},
{
key: 'lucy',
val: 'Lucy',
},
{
key: 'Yiminghe',
val: 'yiminghe',
},
],
},
],
]); //筛选整体数据
const [rowsgroup, setRowsGroup] = useState<any>(
[
{
id: 1, city: { id: '1', cityname: "北京" }, num: { id: 'num1-1', numname: "求和" }, content: 'Row 1',
},
]); // 分组数据
// 删除子集当前条目
const closeEvery = (id: number, outer: any, innder: any) => {
console.log('删除的是谁', id, 'outer', outer, 'inner', innder)
// 获取当前数组中的条目索引
const currentItemIndex = rows[outer].findIndex((item) => item.id === id);
if (currentItemIndex !== -1) {
// 创建新的数组，不包括要删除的数据项
const updatedRows = [...rows[outer]].filter((element, index) => index !== currentItemIndex);
console.log('updatedRows', updatedRows)
// 更新整个数据数组
// 如果删除内部数组的最后一项，同时删除外部数组中该城市数据
const newData = updatedRows.length === 0
? rows.filter((element, index) => index !== outer)
: rows.map((every, index) => index === outer ? updatedRows : every);
if (newData.length === 0) {
setisEmptyRows(false)
console.log('最后一个', newData)
}
// 更新state
setRows(newData);
}
};
// 分组新增
const addFaGroup = (id: number, outer: any,) => {
console.log('分组新增', id, outer)
// 获取当前数组中的条目索引
const currentItemIndex = rowsgroup.findIndex((item) => item.id === id);
if (currentItemIndex !== -1) {
// 创建新的兄弟节点，结构类似于当前点击的节点
const newSibling = {
id: Math.random().toString(),
city: { id: '9', cityname: '山西' },
num: { id: `num${id}-${rows[outer].length + 1}`, numname: "新项" },
content: `New Row ${rows[outer].length + 1}`,
};
// 将新的兄弟节点插入到当前点击节点的后面
const updatedRows = [...rowsgroup];
updatedRows.splice(currentItemIndex + 1, 0, newSibling);
// 更新数据
setRowsGroup(updatedRows);
}
}
// 分组删除
const closeGroupEvery = (id: number, outer: any,) => {
console.log('分组删除当前条', id, outer)
// 获取当前数组中的条目索引
const currentItemIndex = rowsgroup.findIndex((item) => item.id === id);
console.log(currentItemIndex)
if (currentItemIndex !== -1) {
// 创建新的数组，不包括要删除的数据项
const updatedRows = rowsgroup.filter((element, index) => index !== currentItemIndex);
console.log('updatedRows', updatedRows)
// 更新state
setRowsGroup(updatedRows);
}
}
// 筛选新增子集一条
const addChild = (id: any, outer: any, innder: any) => {
console.log('点击的是谁', id, 'outer', outer, 'inner', innder)
// 获取当前数组中的条目索引
const currentItemIndex = rows[outer].findIndex((item) => item.id === id);
if (currentItemIndex !== -1) {
// 创建新的兄弟节点，结构类似于当前点击的节点
const newSibling =
{
id: '', //所属动作
dongzuoid: "",
guizeId: '',
yuzhiId: '',
yuzhiVal: '',
dongzuoname: '请选择 ',
type: "",
guizeArr: [],
yuzhiArr: [],
}
// 将新的兄弟节点插入到当前点击节点的后面
const updatedRows = [...rows[outer]];
updatedRows.splice(currentItemIndex + 1, 0, newSibling);
console.log(updatedRows)
// 更新整个数据数组
const newData = rows.map((every, index) =>
index === outer ? updatedRows : every
);
setRows(newData);
// 更新状态
}
};
