hookehuyr

fix

<!--
* @Date: 2023-11-01 10:18:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-11-01 14:07:53
* @LastEditTime: 2023-11-01 15:32:45
* @FilePath: /vue-flow-editor/doc/selectUserView.vue
* @Description: 文件描述
-->
......@@ -205,16 +205,15 @@ const defaultProps = ref({
});
onMounted(() => {
// console.log(props.visible);
// axios.get('/srv/?a=query_form_all_field')
// .then(res => {
// console.warn(res.data);
// });
// $('.el-tabs__nav')
// 根据数据获取选中的tag标签
// setTagsList(userTabs);
// TODO:查询到的用户列表数据
// TODO: 查询到的用户选中列表数据
userTags.value = [{ id: "user-1-1", name: "用户1-1" }];
// TODO: 查询到的用户列表数据
userTabs.value = [
{
id: "tab-1",
......@@ -338,12 +337,12 @@ onMounted(() => {
];
// 对比选中的用户的 ID,选中的 ID 同步状态到 userTabs 的数据结构上
userTags.value.forEach(ele => {
modifyFieldValue(userTabs.value, "id", ele.id, true);
modifyFieldValue(userTabs.value, "id", ele.id, "checked", true);
});
});
watch(() => {
//
// 监听弹框状态
if (props.visible) {
dialogUserFormVisible.value = true;
} else {
......@@ -351,14 +350,19 @@ watch(() => {
}
});
/**
* 点击Tab切换回调
*
* @param {object} tab - The tab object that was clicked.
* @param {object} event - The event object generated by the click event.
* @param {number} idx - The index of the clicked tab.
*/
const handleTabClick = (tab, event, idx) => {
// 点击Tab切换回调
tabSelectData.value = tab.data; // tab选中数据提供给list类型使用
userList.value = []; // 清空用户列表
checkedUserList.value = []; // 清空选中用户列表
activeTabContent.value = ""; // 清空侧边栏显示
currentNodeKey.value = []; // 清空树形的默认展开
// console.log(tab, event);
// 设置当前激活的tab
userTabType.value = tab.type;
activeTabId.value = tab.id;
......@@ -384,13 +388,16 @@ const handleTabClick = (tab, event, idx) => {
// }
};
/**
* 侧边栏Tab点击回调
*
* @param {type} tab - description of parameter
* @param {type} event - description of parameter
*/
const handleTabContentClick = (tab, event) => {
// 侧边栏Tab点击回调
// console.log(activeTabContent.value);
// console.log(tab);
// console.log(event);
tabSelectData.value.forEach(ele => {
if (ele.label === tab.props.label) {
// 设置右侧显示数据
userList.value = ele.list;
checkedUserList.value = ele.list
.filter(ele => {
......@@ -403,10 +410,15 @@ const handleTabContentClick = (tab, event) => {
});
};
/**
* 树形结构点击回调
*
* @param {object} data - The data associated with the clicked node.
* @return {void}
*/
const handleNodeClick = data => {
// 树形结构点击回调
// console.log(data);
if (data.list) {
// 如果节点下存在 list 字段,设置为右侧显示数据列表
userList.value = data.list;
checkedUserList.value = data.list
.filter(ele => {
......@@ -415,41 +427,48 @@ const handleNodeClick = data => {
.map(ele => {
return ele.id;
});
// console.warn(checkedUserList.value);
// 默认展开相应ID节点
currentNodeKey.value = [data.id];
}
};
/**
* 递归查找匹配字段,并修改字段为新值
* 递归查找匹配字段,并修改字段的值为新值
*
* @param {object} obj - 修改对象
* @param {string} fieldName - 修改字段
* @param {any} targetValue - 匹配值
* @param {string} fieldName - 查找字段
* @param {any} fieldValue - 匹配值
* @param {any} targetName - 目标字段
* @param {any} newValue - 修改新值
*/
function modifyFieldValue(obj, fieldName, targetValue, newValue) {
function modifyFieldValue(obj, fieldName, fieldValue, targetName, newValue) {
// 检查当前层级的字段值是否匹配目标值
if (obj[fieldName] === targetValue) {
obj["checked"] = newValue;
if (obj[fieldName] === fieldValue) {
obj[targetName] = newValue;
}
// 遍历当前层级的子项(如果有)
for (var key in obj) {
if (typeof obj[key] === "object" && obj[key] !== null) {
modifyFieldValue(obj[key], fieldName, targetValue, newValue);
modifyFieldValue(obj[key], fieldName, fieldValue, targetName, newValue);
}
}
}
/**
* 操作勾选框回调
*
* @param {type} user - description of parameter
* @param {type} checked - description of parameter
* @return {type} description of return value
*/
const handleCheckedUserListChange = (user, checked) => {
// 勾选用户回调
// 修改选中值状态
modifyFieldValue(userTabs.value, "id", user.id, checked);
modifyFieldValue(userTabs.value, "id", user.id, "checked", checked);
};
/**
* 递归获取树形结构下的所有list字段数据
* 递归获取树形结构下的所有 list 字段数据
*
* @param {Array} arr - The array to traverse.
* @return {Array} - The list items found.
......@@ -516,12 +535,17 @@ watch(
{ deep: true }
);
/**
* 移除 tags 成员标签回调
*
* @param {string} tag - The tag to be closed.
* @return {undefined} No return value.
*/
const handleTagClose = tag => {
// 移除 tags 成员标签回调
userTags.value.splice(userTags.value.indexOf(tag), 1); // 删除标签列表中的项
// 移除数据结构中的选中值
modifyFieldValue(userTabs.value, "id", tag.id, false);
//
modifyFieldValue(userTabs.value, "id", tag.id, "checked", false);
// ID集合
let tagsId = userTags.value.map(ele => {
return ele.id;
});
......@@ -544,27 +568,42 @@ const handleTagClose = tag => {
}
};
/**
* 关闭用户列表表单回调
*
* @return {void} - No return value.
*/
const closeUserForm = () => {
// 关闭用户列表表单回调
dialogUserFormVisible.value = false;
emit("close", dialogUserFormVisible.value);
};
/**
* 确认用户列表表单回调
*
* @return {void} No return value.
*/
const confirmUserForm = () => {
// 确认用户列表表单回调
dialogUserFormVisible.value = false;
// console.log(userTags.value);
emit("close", dialogUserFormVisible.value);
emit("confirm", userTags.value);
};
/**
* 激活搜索按钮操作
*
* @return {void} No return value.
*/
const activeSearchBtn = () => {
// 激活搜索按钮操作
is_active_search.value = !is_active_search.value;
searchUserList.value = []; // 清空搜索列表
};
/**
* 在搜索框中同步显示tag框选中的用户
*
* @return {void}
*/
const checkSearchStatus = () => {
// 在搜索框中同步显示tag框选中的用户
userTags.value.forEach(ele => {
searchUserList.value.forEach(item => {
if (ele.id === item.id) {
......@@ -577,8 +616,15 @@ const checkSearchStatus = () => {
.filter(ele => ele.checked)
.map(ele => ele.id);
};
/**
* 在搜索框中同步显示tag框选中的用户
*
* @param {Array} userTags - The array of selected user tags.
* @param {Array} userList - The array of all users.
* @param {Array} checkedUserList - The array of users with selected tags.
* @return {void} No return value.
*/
const checkUserStatus = () => {
// 在搜索框中同步显示tag框选中的用户
userTags.value.forEach(ele => {
userList.value.forEach(item => {
if (ele.id === item.id) {
......@@ -592,14 +638,22 @@ const checkUserStatus = () => {
.map(ele => ele.id);
};
/**
* 清空搜索回调
*
* @return {void}
*/
const onClearSearch = () => {
// 清空搜索回调
is_active_search.value = !is_active_search.value;
// 同步显示tag框选中的用户
checkUserStatus();
};
/**
* 搜索回调
*
* @return {void} No return value.
*/
const onSearch = () => {
// 搜索回调
// TODO: 获取后台数据
searchUserList.value = [
{
......