Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6ea39e00 1 parent 7baf1257

fix 组织结构组件-单选的操作逻辑优化

Inline Side-by-side
Showing 1 changed file with 166 additions and 128 deletions
<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-06 11:43:57
* @LastEditTime: 2024-08-06 16:03:02
* @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
* @Description: 树形组件
-->
......@@ -106,6 +106,7 @@
>
<van-checkbox
v-for="(role, index) in roleList"
:ref="el => roleCheckboxRefs[index] = el"
:id="role.id"
:key="index"
:name="role.id"
......@@ -114,7 +115,7 @@
:checked-color="styleColor.baseColor"
:disabled="role.disabled"
style="margin-bottom: 0.5rem;"
@click="onRoleClick(role, $event)"
@click="onRoleClick(role, $event, index)"
>{{ role.name }}</van-checkbox>
</van-checkbox-group>
<div style="height: 10vh;"></div>
......@@ -145,8 +146,9 @@
@change="onUserChange"
>
<van-checkbox
@click="onCheckUserChange(user, $event)"
@click="onCheckUserChange(user, $event, index)"
v-for="(user, index) in userList"
:ref="el => userCheckboxRefs[index] = el"
:id="user.id"
:type="user.type"
:text="user.name"
......@@ -297,6 +299,7 @@ let dept_list = [];
let check_type = ref(''); // 单选/多选模式
// 处理Tab显示问题
// TODO：等待后台数据
const tree_tabs = ['dept', 'role', 'user'];
const tabList = computed(() => {
let arr = [];
......@@ -346,8 +349,8 @@ onMounted(async () => {
if (flowRoleList.code) {
dept_list = flowRoleList.data;
}
// TEST
check_type.value = ''; // 默认单选
// TODO：等待后台数据
check_type.value = '';
// 获取已选中数据
// 如果有默认值处理
props.value = props.component_props.default;
......@@ -553,26 +556,26 @@ const checkedGroup = ref({
/**
* 重置角色Tab列表的disable状态
*/
const resetRoleDisable = () => {
// 如果角色没有选中，解除禁用
if (!role_checked.value.length) {
roleList.value.forEach(item => {
item.disabled = false;
});
}
}
// const resetRoleDisable = () => {
// // 如果角色没有选中，解除禁用
// if (!role_checked.value.length) {
// roleList.value.forEach(item => {
// item.disabled = false;
// });
// }
// }
/**
* 重置成员Tab列表的disable状态
*/
const resetUserDisable = () => {
// 如果成员没有选中，解除禁用
if (!user_checked.value.length) {
userList.value.forEach(item => {
item.disabled = false;
});
}
}
// const resetUserDisable = () => {
// // 如果成员没有选中，解除禁用
// if (!user_checked.value.length) {
// userList.value.forEach(item => {
// item.disabled = false;
// });
// }
// }
/**
* 重置搜索结果列表的disable状态
......@@ -589,11 +592,11 @@ const resetSearchDisable = () => {
/**
* 重置所有列表的disable状态
*/
const resetAllDisable = () => {
resetRoleDisable(); // 重置角色禁用状态
resetUserDisable(); // 重置成员禁用状态
resetSearchDisable(); // 重置搜索结果禁用状态
}
// const resetAllDisable = () => {
// resetRoleDisable(); // 重置角色禁用状态
// resetUserDisable(); // 重置成员禁用状态
// resetSearchDisable(); // 重置搜索结果禁用状态
// }
const onRemoveDeptTag = (dept) => { // 移除部门标签
// 移除选中框显示
......@@ -606,7 +609,7 @@ const onRemoveDeptTag = (dept) => { // 移除部门标签
search_result_checked.value.splice(idx, 1);
// 单选模式
if (check_type.value === 'single') {
resetAllDisable();
resetSearchDisable();
}
}
......@@ -621,7 +624,7 @@ const onRemoveRoleTag = (role) => { // 移除角色标签
search_result_checked.value.splice(i, 1);
// 单选模式
if (check_type.value === 'single') {
resetAllDisable();
resetSearchDisable();
}
}
......@@ -636,7 +639,7 @@ const onRemoveUserTag = (user) => { // 移除成员标签
search_result_checked.value.splice(i, 1);
// 单选模式
if (check_type.value === 'single') {
resetAllDisable();
resetSearchDisable();
}
}
......@@ -670,48 +673,48 @@ const deptListReset = () => { // 组织重置列表
const roleListReset = () => { // 角色重置列表
roleList.value = dept_list;
// 单选模式下，勾选项目操作一个时，角色选项不可勾选
if (check_type.value === 'single') {
if (treeCheckedCount.value) {
roleList.value.forEach(item => {
item.disabled = true;
checkedGroup.value.role.forEach(role => {
if (role.id === item.id) {
item.disabled = false;
}
})
});
} else {
roleList.value.forEach(item => {
item.disabled = false;
})
}
}
// // 单选模式下，勾选项目操作一个时，角色选项不可勾选
// if (check_type.value === 'single') {
// if (treeCheckedCount.value) {
// roleList.value.forEach(item => {
// item.disabled = true;
// checkedGroup.value.role.forEach(role => {
// if (role.id === item.id) {
// item.disabled = false;
// }
// })
// });
// } else {
// roleList.value.forEach(item => {
// item.disabled = false;
// })
// }
// }
}
const userListReset = () => { // 成员重置列表
userTreeRef.value.setData(role_list);
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;
})
}
}
}
// // 单选模式
// 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 *****************/
......@@ -785,6 +788,9 @@ const role_checked = ref([]);
*/
const roleList = ref([]);
const roleCheckboxRefs = ref([]);
const userCheckboxRefs = ref([]);
/**
* 角色多选值变化回调
* @param {*} val
......@@ -807,28 +813,43 @@ const roleChangeMethod = (val) => {
* @param {*} role
* @param {*} evt
*/
const onRoleClick = (role, evt) => {
if (role.disabled) { // 节点禁用时不能操作
const onRoleClick = (role, evt, index) => {
// if (role.disabled) { // 节点禁用时不能操作
// showToast('单选模式下，只能勾选一个')
// return;
// }
// // 单选模式
// if (check_type.value === 'single') {
// // 移除选中框显示
// const index = checkedGroup.value['role'].findIndex(item => item === role.id);
// checkedGroup.value['role'].splice(index, 1);
// // 超出选中1个，禁用其他选中
// if (!treeCheckedCount.value) {
// roleList.value.forEach(item => {
// if (item.id === role.id) {
// item.disabled = false;
// } else {
// item.disabled = true;
// }
// });
// }
// // 如果没有选中，解除禁用
// resetRoleDisable();
// }
if (check_type.value === 'single') {
const idx = checkedGroup.value['role'].findIndex(item => item.id === role.id);
if (treeCheckedCount.value) {
if (idx === -1) {
showToast('单选模式下，只能勾选一个')
setTimeout(() => {
roleCheckboxRefs.value[index].toggle();
}, 10);
return;
}
// 单选模式
if (check_type.value === 'single') {
// 移除选中框显示
const index = checkedGroup.value['role'].findIndex(item => item === role.id);
checkedGroup.value['role'].splice(index, 1);
// 超出选中1个，禁用其他选中
if (!treeCheckedCount.value) {
roleList.value.forEach(item => {
if (item.id === role.id) {
item.disabled = false;
} else {
item.disabled = true;
checkedGroup.value['role'].splice(idx, 1);
}
});
}
// 如果没有选中，解除禁用
resetRoleDisable();
}
}
/**************** END *****************/
......@@ -849,34 +870,50 @@ const userList = ref([]);
const onUserTreeClick = (node) => { // 点击成员树形回调
userList.value = node.user;
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 {
resetUserDisable();
}
}
// // 单选模式
// 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 {
// resetUserDisable();
// }
// }
}
const onUserChange = (val) => { // 成员多选组点击回调
}
const onCheckUserChange = (val, evt) => {
const onCheckUserChange = (val, evt, index) => {
nextTick(() => {
if (check_type.value === 'single') {
const idx = checkedGroup.value['user'].findIndex(item => item.id === val.id);
if (treeCheckedCount.value) {
if (idx === -1) {
showToast('单选模式下，只能勾选一个')
setTimeout(() => {
userCheckboxRefs.value[index].toggle();
}, 10);
return;
} else {
checkedGroup.value['user'].splice(idx, 1);
}
}
}
let checked = false;
let id = '';
let name = '';
......@@ -908,29 +945,30 @@ const onCheckUserChange = (val, evt) => {
}
}
});
// 节点禁用时不能操作
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;
}
});
}
// 如果没有选中，解除禁用
resetUserDisable();
}
// // 节点禁用时不能操作
// 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;
// }
// });
// }
// // 如果没有选中，解除禁用
// resetUserDisable();
// }
}
/**************** END *****************/
......