Skip to content

fix: 【团队成员】修复全选的问题 (#1558) #1562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 6, 2024
Merged

fix: 【团队成员】修复全选的问题 (#1558) #1562

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 58 additions & 49 deletions ui/src/views/team/component/PermissionSetting.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,15 @@
<el-checkbox
:disabled="props.manage"
v-model="allChecked[TeamEnum.MANAGE]"
:indeterminate="allIndeterminate[TeamEnum.MANAGE]"
label="管理"
@change="handleCheckAllChange($event, TeamEnum.MANAGE)"
/>
</template>
<template #default="{ row }">
<el-checkbox
:disabled="props.manage"
v-model="row.operate[TeamEnum.MANAGE]"
@change="checkedOperateChange(TeamEnum.MANAGE, row)"
@change="(e: boolean) => checkedOperateChange(TeamEnum.MANAGE, row, e)"
/>
</template>
</el-table-column>
Expand All @@ -50,15 +50,15 @@
<el-checkbox
:disabled="props.manage"
v-model="allChecked[TeamEnum.USE]"
:indeterminate="allIndeterminate[TeamEnum.USE]"
label="查看"
@change="handleCheckAllChange($event, TeamEnum.USE)"
/>
</template>
<template #default="{ row }">
<el-checkbox
:disabled="props.manage"
v-model="row.operate[TeamEnum.USE]"
@change="checkedOperateChange(TeamEnum.USE, row)"
@change="(e: boolean) => checkedOperateChange(TeamEnum.USE, row, e)"
/>
</template>
</el-table-column>
Expand All @@ -85,58 +85,67 @@ const isApplication = computed(() => props.type === TeamEnum.APPLICATION)

const emit = defineEmits(['update:data'])
const allChecked: any = ref({
[TeamEnum.MANAGE]: false,
[TeamEnum.USE]: false
[TeamEnum.MANAGE]: computed({
get: () => {
return filterData.value.some((item: any) => item.operate[TeamEnum.MANAGE])
},
set: (val: boolean) => {
if (val) {
filterData.value.map((item: any) => {
item.operate[TeamEnum.MANAGE] = true
})
} else {
filterData.value.map((item: any) => {
item.operate[TeamEnum.MANAGE] = false
})
}
}
}),
[TeamEnum.USE]: computed({
get: () => {
return filterData.value.some((item: any) => item.operate[TeamEnum.USE])
},
set: (val: boolean) => {
if (val) {
filterData.value.map((item: any) => {
item.operate[TeamEnum.USE] = true
})
} else {
filterData.value.map((item: any) => {
item.operate[TeamEnum.USE] = false
})
}
}
})
})

const filterText = ref('')

const filterData = computed(() => props.data.filter((v: any) => v.name.includes(filterText.value)))

watch(
() => props.data,
(val) => {
Object.keys(allChecked.value).map((item) => {
allChecked.value[item] = compare(item)
})
emit('update:data', val)
},
{
deep: true
}
)

function handleCheckAllChange(val: string | number | boolean, Name: string | number) {
if (val) {
props.data.map((item: any) => {
item.operate[Name] = true
})
} else {
props.data.map((item: any) => {
item.operate[Name] = false
})
}
}
function checkedOperateChange(Name: string | number, row: any) {
if (Name === TeamEnum.MANAGE && row.operate[TeamEnum.MANAGE]) {
props.data.map((item: any) => {
if (item.id === row.id) {
item.operate[TeamEnum.USE] = true
}
})
}
allChecked.value[Name] = compare(Name)
}

function compare(attrs: string | number) {
const filterData = props.data.filter((item: any) => item?.operate[attrs])
return props.data.length > 0 && filterData.length === props.data.length
}

onMounted(() => {
Object.keys(allChecked.value).map((item) => {
allChecked.value[item] = compare(item)
const allIndeterminate: any = ref({
[TeamEnum.MANAGE]: computed(() => {
const all_not_checked = filterData.value.every((item: any) => !item.operate[TeamEnum.MANAGE])
if (all_not_checked) {
return false
}
return !filterData.value.every((item: any) => item.operate[TeamEnum.MANAGE])
}),
[TeamEnum.USE]: computed(() => {
const all_not_checked = filterData.value.every((item: any) => !item.operate[TeamEnum.USE])
if (all_not_checked) {
return false
}
return !filterData.value.every((item: any) => item.operate[TeamEnum.USE])
})
})

function checkedOperateChange(Name: string | number, row: any, e: boolean) {
props.data.map((item: any) => {
if (item.id === row.id) {
item.operate[Name] = e
}
})
}
</script>
<style lang="scss" scope></style>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此代码没有明显的结构问题，但是存在一些小错误和优化空间。以下是几处需要改进的地方：

  1. 在onMounted函数内部，可以使用简洁的变量命名（如noChecked）而不需要重复计算数据长度。
  2. 如果只有一种状态变化时更新所有值，则可以在单个函数中实现这一点以提高效率并简化逻辑：
function updateAllValues(value) {
  filteredData.forEach((row, idx) => {
    if (value === teamEnum.getValue(...row)) { // 深克隆对象类型进行比较
      filteredData[idx].operate[teamColumnName] = true; 
    } else {
      filteredData[idx].operate[teamColumnName] = false;
    }
  });
}

这样就可以在只需更新一个条件下的所有行的情况下完成操作。

  1. 当有多个选择项时，为每个选项添加额外的状态表示可能有所帮助，特别是当这些列表相互关联或用户界面交互设计要求显示不同的可选内容时更为重要。
  2. 尽量避免通过传递不必要的参数来触发某些函数，例如直接访问某个成员属性而非方法调用。

此外，还可以考虑对过滤后的数据排序等进一步的优化来提升性能，并确保UI元素的选择功能能正确响应用户的点击、拖拽和其他输入行为。

Loading