hookehuyr

fix 组织结构控件-角色单选逻辑

<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-05 16:53:52
* @LastEditTime: 2024-08-05 18:23:40
* @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
* @Description: 树形组件
-->
......@@ -145,17 +145,19 @@
@change="onUserChange"
>
<van-checkbox
@click="onCheckUserChange(user, $event)"
v-for="(user, index) in userList"
:id="user.id"
:type="user.type"
:text="user.name"
:key="index"
:name="user.id"
shape="square"
icon-size="13px"
:checked-color="styleColor.baseColor" style="margin-bottom: 0.5rem;">{{ user.name }}</van-checkbox>
@click="onCheckUserChange(user, $event)"
v-for="(user, index) in userList"
:id="user.id"
:type="user.type"
:text="user.name"
:key="index"
:name="user.id"
shape="square"
icon-size="13px"
:checked-color="styleColor.baseColor"
:disabled="user.disabled"
style="margin-bottom: 0.5rem;"
>{{ user.name }}</van-checkbox>
</van-checkbox-group>
<div style="height: 10vh;"></div>
</van-col>
......@@ -487,6 +489,15 @@ const resetRoleDisabled = () => {
}
}
const resetUserDisabled = () => {
// 如果角色没有选中,解除禁用
if (!user_checked.value.length) {
userList.value.forEach(item => {
item.disabled = false;
});
}
}
const onRemoveDeptTag = (dept) => { // 移除部门标签
// 移除选中框显示
const index = checkedGroup.value.dept.findIndex(item => JSON.stringify(item) === JSON.stringify(dept));
......@@ -498,7 +509,8 @@ const onRemoveDeptTag = (dept) => { // 移除部门标签
search_result_checked.value.splice(idx, 1);
// 单选模式
if (check_type.value === 'single') {
resetRoleDisabled();
resetRoleDisabled();// 重置角色禁用状态
resetUserDisabled(); // 重置成员禁用状态
}
}
......@@ -513,7 +525,8 @@ const onRemoveRoleTag = (role) => { // 移除角色标签
search_result_checked.value.splice(i, 1);
// 单选模式
if (check_type.value === 'single') {
resetRoleDisabled();
resetRoleDisabled();// 重置角色禁用状态
resetUserDisabled(); // 重置成员禁用状态
}
}
......@@ -528,7 +541,8 @@ const onRemoveUserTag = (user) => { // 移除成员标签
search_result_checked.value.splice(i, 1);
// 单选模式
if (check_type.value === 'single') {
resetRoleDisabled();
resetRoleDisabled(); // 重置角色禁用状态
resetUserDisabled(); // 重置成员禁用状态
}
}
......@@ -586,7 +600,26 @@ const roleListReset = () => { // 角色重置列表
const userListReset = () => { // 成员重置列表
userTreeRef.value.setData(role_list);
userTreeRef.value.setExpand(35697, true)
userTreeRef.value.setExpand(35697, true);
if (check_type.value === 'single') {
if (treeCheckedCount.value) { // 已勾选值一个
if (checkedGroup.value.user.length) {
checkedGroup.value.user.forEach(user => {
userList.value.forEach(item => {
if (user.id === item.id) {
item.disabled = false;
} else {
item.disabled = true;
}
});
})
} else {
userList.value.forEach(item => {
item.disabled = true;
})
}
}
}
}
/**************** END *****************/
......@@ -691,7 +724,28 @@ const user_checked = ref([]); // 成员多选选中值
const onUserTreeClick = (node) => { // 点击成员树形回调
userList.value = node.user;
user_checked.value = checkedGroup.value.user.map(item => item.id)
user_checked.value = checkedGroup.value.user.map(item => item.id);
// 单选模式判断
if (check_type.value === 'single') {
if (treeCheckedCount.value) { // 已勾选值一个
if (checkedGroup.value.user.length) { // 成员列表有勾选值
checkedGroup.value.user.forEach(user => {
node.user.forEach(item => {
if (user.id === item.id) {
item.disabled = false;
} else {
item.disabled = true;
}
});
})
} else { // 成员列表没有勾选值
showToast('单选模式下,只能勾选一个')
userList.value = []
}
} else {
resetUserDisabled();
}
}
}
const onUserChange = (val) => { // 成员多选组点击回调
......@@ -729,7 +783,28 @@ const onCheckUserChange = (val, evt) => {
checkedGroup.value.user.splice(index, 1);
}
}
})
});
if (val.disabled) { // 节点禁用时不能操作
showToast('单选模式下,只能勾选一个')
return;
}
if (check_type.value === 'single') {
// 移除选中框显示
const index = checkedGroup.value['user'].findIndex(item => item === val.id);
checkedGroup.value['user'].splice(index, 1);
// 超出选中1个,禁用其他选中
if (!treeCheckedCount.value) {
userList.value.forEach(item => {
if (item.id === val.id) {
item.disabled = false;
} else {
item.disabled = true;
}
});
}
// 如果没有选中,解除禁用
resetUserDisabled();
}
}
/**************** END *****************/
......