hookehuyr

fix 如果选中项ID相同需要去重

Showing 1 changed file with 50 additions and 38 deletions
......@@ -272,6 +272,8 @@
<el-tree
:data="item.data"
:props="state.defaultProps"
node-key="id"
:default-expanded-keys="state.currentNodeKey"
empty-text="暂无数据"
@node-click="handleNodeClick"
/>
......@@ -302,12 +304,13 @@
tab-position="left"
style=""
class="demo-tabs"
v-model="activeTabContent"
v-model="state.activeTabContent"
@tab-click="handleTabContentClick"
>
<el-tab-pane
v-for="(role, idx) in item.data"
:key="idx"
:name="role.label"
:label="role.label"
>
<el-checkbox-group
......@@ -465,7 +468,9 @@ export default {
}
],
userTags: [],
currentNodeKey: [], // 当前展开的节点
activeTabId: "tab-1", // TODO: 需要获取默认第一个ID
activeTabContent: '',
userTabs: [],
tabSelectData: [],
userTabType: "tree",
......@@ -590,15 +595,15 @@ export default {
children: [],
list: [
{
id: "role-1-2",
label: "选项 A",
checked: false,
id: "user-1-1",
label: "用户1-1",
checked: true,
disabled: false
},
{
id: "role-1-3",
label: "选项 B",
checked: true,
id: "user-2-2",
label: "用户2-2",
checked: false,
disabled: false
},
{
......@@ -637,6 +642,8 @@ export default {
state.tabSelectData = tab.data; // tab选中数据提供给list类型使用
state.userList = []; // 清空用户列表
state.checkedUserList = []; // 清空选中用户列表
state.activeTabContent = ''; // 清空侧边栏显示
state.currentNodeKey = []; // 清空树形的默认展开
// console.log(tab, event);
// 设置当前激活的tab
state.userTabType = tab.type;
......@@ -650,21 +657,23 @@ export default {
// 文字宽度
state.tabTextWidth = $("#" + tab.id).width() + "px";
// 检查列表第一项是否有值
if (tab?.data[0]?.list) {
let list = tab.data[0].list;
state.userList = list;
state.checkedUserList = list
.filter(ele => {
return ele.checked;
})
.map(ele => {
return ele.id;
});
}
// if (tab?.data[0]?.list) {
// let list = tab.data[0].list;
// state.userList = list;
// state.checkedUserList = list
// .filter(ele => {
// return ele.checked;
// })
// .map(ele => {
// return ele.id;
// });
// }
};
const handleTabContentClick = (tab, event) => {
// 侧边栏Tab点击回调
// console.log(state.activeTabContent);
// console.log(tab);
// console.log(event);
state.tabSelectData.forEach(ele => {
if (ele.label === tab.props.label) {
......@@ -692,6 +701,7 @@ export default {
return ele.id;
});
// console.warn(state.checkedUserList);
state.currentNodeKey = [data.id];
}
};
......@@ -744,8 +754,12 @@ export default {
});
// 合并成一维数组列表
userList = [...userList.flat()];
// 如果ID相同,需要数据去重
let uniqueArray = userList.filter((value, index, self) =>
index === self.findIndex(obj => obj.id === value.id)
);
// 勾选变化后同步到选中列表
state.userTags = userList
state.userTags = uniqueArray
.filter(ele => {
return ele.checked;
})
......@@ -823,10 +837,26 @@ export default {
.filter(ele => ele.checked)
.map(ele => ele.id);
};
const checkUserStatus = () => {
// 在搜索框中同步显示tag框选中的用户
state.userTags.forEach(ele => {
state.userList.forEach(item => {
if (ele.id === item.id) {
item.checked = true;
}
});
});
// 显示选中tags的用户
state.checkedUserList = state.userList
.filter(ele => ele.checked)
.map(ele => ele.id);
};
const onClearSearch = () => {
// 清空搜索回调
state.is_active_search = !state.is_active_search;
// 同步显示tag框选中的用户
checkUserStatus();
};
const onSearch = () => {
// TODO: 搜索回调
......@@ -834,7 +864,7 @@ export default {
{
id: "user-1-1",
label: "用户1-1",
checked: true,
checked: false,
disabled: false
},
{
......@@ -849,24 +879,6 @@ export default {
checked: false,
disabled: true
},
{
id: "role-1-2",
label: "选项 A",
checked: false,
disabled: false
},
{
id: "role-1-3",
label: "选项 B",
checked: true,
disabled: false
},
{
id: "role-1-4",
label: "选项 C",
checked: false,
disabled: true
}
];
// console.log(state.userTags);
checkSearchStatus();
......