Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
20b956fa 1 parent 64dacace

fix 代码注释

Inline Side-by-side
Showing 1 changed file with 145 additions and 62 deletions
<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-05 19:27:33
* @LastEditTime: 2024-08-06 11:42:29
* @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
* @Description: 树形组件
-->
......@@ -323,6 +323,19 @@ const tabList = computed(() => {
const maxWidth = ref(0);
/**
* 计算选中框数量
* 选中框的数量 >= 1
* @returns {boolean}
*/
const treeCheckedCount = computed(() => {
let dept_count = checkedGroup.value.dept.length;
let user_count = checkedGroup.value.user.length;
let role_count = checkedGroup.value.role.length;
return dept_count + user_count + role_count >= 1;
});
onMounted(async () => {
// TAG: 获取后台数据
const flowDeptList = await getFlowDeptListAPI({ form_code: $route.query.code });
......@@ -333,11 +346,12 @@ onMounted(async () => {
if (flowRoleList.code) {
dept_list = flowRoleList.data;
}
// TEST
check_type.value = 'single'; // 默认单选
// 获取已选中数据
// 如果有默认值处理
props.value = props.component_props.default;
// TEST
check_type.value = ''; // 默认单选
//
if (props.value) {
props.value.forEach(item => {
if (item.type === 'dept') {
......@@ -357,7 +371,7 @@ onMounted(async () => {
})
});
const openTree = () => {
const openTree = () => { // 点击组件展示框回调
if (props.component_props.readonly) return false; // 只读判断
// 打开弹窗
showPopover.value = true;
......@@ -377,10 +391,20 @@ const openTree = () => {
});
}
/**
* 点击节点详情
* @param {*} id
* @param {*} type
* @param {*} name
* @param {*} mobile
*/
const node_info = ref({});
const show_detail = ref(false);
const clickNode = ({ id, type, name, mobile='' }) => { // 点击显示选择详情
/******************** END ****************/
// 点击显示框，显示节点详情
const clickNode = ({ id, type, name, mobile='' }) => {
if (!props.component_props.readonly) return false; // 非只读不予许操作
const obj = {
dept: '部门',
......@@ -399,21 +423,36 @@ const clickNode = ({ id, type, name, mobile='' }) => { // 点击显示选择详
show_detail.value = true;
}
/**
* 勾选数据结构
* @type {Object}
* @property {Array} dept 组织结构
* @property {Array} role 角色
* @property {Array} user 成员
*/
const emitCheckedGroup = ref({
dept: [], // 组织结构
role: [], // 角色
user: [] // 成员
});
/**
* 勾选数据---发送表单数据
* @type {Array}
*/
const tree_select_value = ref([]);
const onCancelClick = () => {
/******* 搜索输入项 *******/
const showPopover = ref(false); // 显示/隐藏弹框
const onCancelClick = () => { // 取消操作
showPopover.value = false;
}
const onConfirmClick = () => {
const onConfirmClick = () => { // 确定操作
showPopover.value = false;
if (is_search.value) {
onCloseSearch()
onCloseSearch();
}
//
emitCheckedGroup.value = _.cloneDeep(checkedGroup.value);
......@@ -421,12 +460,10 @@ const onConfirmClick = () => {
tree_select_value.value = [].concat(...Object.values(emitCheckedGroup.value));
}
/******* 搜索输入项 *******/
const showPopover = ref(false); // 显示/隐藏弹框
const searchInputRef = ref(null);
const searchValue = ref('');
const searchInputRef = ref(null); // 搜索输入框Ref
const searchValue = ref(''); // 搜索输入框值
const is_search = ref(false); // 默认不显示搜索框
/**
* 搜索选中结果集
* @param {Number} id
......@@ -440,18 +477,24 @@ const onSearchBlur = async () => { // 搜索框失去焦点
if (check_type.value === 'single') {
if (treeCheckedCount.value) {
let arr = [...checkedGroup.value.dept, ...checkedGroup.value.role, ...checkedGroup.value.user]
let current = arr[0]; // 单选模式下，勾选值只会有一个
//
for (const key in data) {
const element = data[key];
// 遍历数组，设置特定元素的禁用状态
element.forEach(item => {
if (item.id === arr[0].id) { // 禁用其他
if (item.id === current.id) {
// 设置该项不禁用
item.disabled = false;
} else {
// 设置该项禁用
item.disabled = true;
}
});
}
}
}
// 赋值搜索结果集
user_dept_role.value = data;
}
}
......@@ -507,7 +550,10 @@ const checkedGroup = ref({
user: [] // 成员
});
const resetRoleDisabled = () => {
/**
* 重置角色Tab列表的disable状态
*/
const resetRoleDisable = () => {
// 如果角色没有选中，解除禁用
if (!role_checked.value.length) {
roleList.value.forEach(item => {
......@@ -516,8 +562,11 @@ const resetRoleDisabled = () => {
}
}
const resetUserDisabled = () => {
// 如果角色没有选中，解除禁用
/**
* 重置成员Tab列表的disable状态
*/
const resetUserDisable = () => {
// 如果成员没有选中，解除禁用
if (!user_checked.value.length) {
userList.value.forEach(item => {
item.disabled = false;
......@@ -525,22 +574,27 @@ const resetUserDisabled = () => {
}
}
/**
* 重置搜索结果列表的disable状态
*/
const resetSearchDisable = () => {
for (const key in user_dept_role.value) {
const element = user_dept_role.value[key];
element.forEach(item => {
item.disabled = false;
// search_result_checked.value.forEach(val => {
// if (item.id === val) { // 禁用其他
// item.disabled = false;
// } else {
// item.disabled = true;
// }
// })
});
}
}
/**
* 重置所有列表的disable状态
*/
const resetAllDisable = () => {
resetRoleDisable(); // 重置角色禁用状态
resetUserDisable(); // 重置成员禁用状态
resetSearchDisable(); // 重置搜索结果禁用状态
}
const onRemoveDeptTag = (dept) => { // 移除部门标签
// 移除选中框显示
const index = checkedGroup.value.dept.findIndex(item => JSON.stringify(item) === JSON.stringify(dept));
......@@ -552,9 +606,7 @@ const onRemoveDeptTag = (dept) => { // 移除部门标签
search_result_checked.value.splice(idx, 1);
// 单选模式
if (check_type.value === 'single') {
resetRoleDisabled();// 重置角色禁用状态
resetUserDisabled(); // 重置成员禁用状态
resetSearchDisable(); // 重置搜索结果禁用状态
resetAllDisable();
}
}
......@@ -569,9 +621,7 @@ const onRemoveRoleTag = (role) => { // 移除角色标签
search_result_checked.value.splice(i, 1);
// 单选模式
if (check_type.value === 'single') {
resetRoleDisabled();// 重置角色禁用状态
resetUserDisabled(); // 重置成员禁用状态
resetSearchDisable(); // 重置搜索结果禁用状态
resetAllDisable();
}
}
......@@ -586,9 +636,7 @@ const onRemoveUserTag = (user) => { // 移除成员标签
search_result_checked.value.splice(i, 1);
// 单选模式
if (check_type.value === 'single') {
resetRoleDisabled(); // 重置角色禁用状态
resetUserDisabled(); // 重置成员禁用状态
resetSearchDisable(); // 重置搜索结果禁用状态
resetAllDisable();
}
}
......@@ -597,9 +645,6 @@ const tabRef = ref(null);
const tabActive = ref(0);
const deptTreeRef = ref();
const userList = ref([]);
const onClickTab = ({ title }) => { // tab点击事件
nextTick(() => {
if (title === '组织结构') {
......@@ -647,6 +692,7 @@ const roleListReset = () => { // 角色重置列表
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) {
......@@ -673,13 +719,18 @@ const userListReset = () => { // 成员重置列表
const select_dept_value = ref(); // 组织结构树形选中值
const deptTreeDisableAll = ref(false); // 组织结构树形禁用
const getDeptTreeData = () => { // 获取组织结构数据
deptTreeRef.value.setData(role_list);
// 默认展开第一个
deptTreeRef.value.setExpand(35697, true);
}
// const getDeptTreeData = () => { // 获取组织结构数据
// deptTreeRef.value.setData(role_list);
// // 默认展开第一个
// deptTreeRef.value.setExpand(35697, true);
// }
const deptTreeCheck = (node) => { // 组织结构单选勾中
/**
* 组织结构单选勾中
* @param {*} node
*/
const deptTreeCheck = (node) => {
// 单选模式
if (check_type.value === 'single') {
if (treeCheckedCount.value) {
showToast('单选模式下，只能勾选一个')
......@@ -689,7 +740,12 @@ const deptTreeCheck = (node) => { // 组织结构单选勾中
}
}
const deptTreeUncheck = (node) => { // 组织结构单选取消
/**
* 组织结构单选取消
* @param {*} node
*/
const deptTreeUncheck = (node) => {
// 单选模式
if (check_type.value === 'single') {
// 移除选中框显示
const index = checkedGroup.value['dept'].findIndex(item => item.id === node.id);
......@@ -697,15 +753,12 @@ const deptTreeUncheck = (node) => { // 组织结构单选取消
}
}
const treeCheckedCount = computed(() => { // 选中框的数量是否大于一
let dept_count = checkedGroup.value.dept.length;
let user_count = checkedGroup.value.user.length;
let role_count = checkedGroup.value.role.length;
return dept_count + user_count + role_count >= 1;
});
const deptTreeCheckedChange = (arr) => { // 组织结构勾选回调
/**
* 组织结构勾选回调
* @param {*} arr
*/
const deptTreeCheckedChange = (arr) => {
// 单选模式
if (check_type.value === 'single') {
if (treeCheckedCount.value) {
return false
......@@ -723,10 +776,21 @@ const deptTreeCheckedChange = (arr) => { // 组织结构勾选回调
/**************** END *****************/
/************* 角色模块 ***************/
const role_checked = ref([]); // 角色多选选中值
/**
* 角色选中值集合
*/
const role_checked = ref([]);
/**
* 角色列表数据集合
*/
const roleList = ref([]);
const roleChangeMethod = (val) => { // 角色多选组点击回调
/**
* 角色多选值变化回调
* @param {*} val
*/
const roleChangeMethod = (val) => {
// 单选模式
if (check_type.value === 'single') {
if (treeCheckedCount.value) {
return;
......@@ -738,11 +802,17 @@ const roleChangeMethod = (val) => { // 角色多选组点击回调
checkedGroup.value.role = result.filter(item => item !== undefined);
}
const onRoleClick = (role, evt) => { // 角色单击回调
/**
* 角色单击选项回调
* @param {*} role
* @param {*} evt
*/
const onRoleClick = (role, evt) => {
if (role.disabled) { // 节点禁用时不能操作
showToast('单选模式下，只能勾选一个')
return;
}
// 单选模式
if (check_type.value === 'single') {
// 移除选中框显示
const index = checkedGroup.value['role'].findIndex(item => item === role.id);
......@@ -758,7 +828,7 @@ const onRoleClick = (role, evt) => { // 角色单击回调
});
}
// 如果没有选中，解除禁用
resetRoleDisabled();
resetRoleDisable();
}
}
/**************** END *****************/
......@@ -766,12 +836,20 @@ const onRoleClick = (role, evt) => { // 角色单击回调
/************* 成员模块 ***************/
const userTreeRef = ref();
const select_user_value = ref(); // 成员树形选中值
const user_checked = ref([]); // 成员多选选中值
/**
* 成员选中值集合
*/
const user_checked = ref([]);
/**
* 成员Tab列表
*/
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) { // 成员列表有勾选值
......@@ -789,7 +867,7 @@ const onUserTreeClick = (node) => { // 点击成员树形回调
userList.value = []
}
} else {
resetUserDisabled();
resetUserDisable();
}
}
}
......@@ -830,10 +908,12 @@ const onCheckUserChange = (val, evt) => {
}
}
});
if (val.disabled) { // 节点禁用时不能操作
// 节点禁用时不能操作
if (val.disabled) {
showToast('单选模式下，只能勾选一个')
return;
}
// 单选模式
if (check_type.value === 'single') {
// 移除选中框显示
const index = checkedGroup.value['user'].findIndex(item => item === val.id);
......@@ -849,12 +929,15 @@ const onCheckUserChange = (val, evt) => {
});
}
// 如果没有选中，解除禁用
resetUserDisabled();
resetUserDisable();
}
}
/**************** END *****************/
/***************** 搜索结果集模块 ********************/
/**
* 搜索结果集合
*/
const user_dept_role = ref({
dept: [],
role: [],
......