Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
41c77f63 1 parent bd2047f1

成员列表选择控件细节调整

Inline Side-by-side
Showing 4 changed files with 120 additions and 374 deletions
......@@ -136,7 +136,7 @@
<el-col :span="6">可见</el-col>
<el-col :span="6">可编辑</el-col>
</el-row>
<el-row style="width: 100%; padding-left: 10px;">
<el-row v-if="!state.search_auth_value" style="width: 100%; padding-left: 10px;">
<el-col :span="12" style="color: #409eff;">全选</el-col>
<el-col :span="6" style="padding-left: 5px;"
><el-checkbox
......
<!--
* @Date: 2023-11-01 10:18:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-11-22 11:39:41
* @LastEditTime: 2023-11-22 13:43:23
* @FilePath: /vue-flow-editor/doc/selectUserView.vue
* @Description: 成员列表选择控件
-->
......@@ -55,9 +55,10 @@
</div>
</div>
</div>
<div class="flow-tab-search" @click="activeSearchBtn">
<!-- TAG: 暂时不做搜索功能 -->
<!-- <div class="flow-tab-search" @click="activeSearchBtn">
<el-icon :size="15"><Search /></el-icon> &nbsp;搜索框
</div>
</div> -->
</div>
<div v-else>
<el-input
......@@ -79,20 +80,22 @@
</div>
</div>
<!-- 未激活搜索框 -->
<div v-if="!is_active_search" style="max-height: 300px; overflow: scroll;">
<div v-if="!is_active_search" style="height: 300px;">
<div v-for="(item, index) in userTabs" :key="index">
<!-- 组织结构树 -->
<div v-if="item.id === activeTabId && item.type === 'corp-tree'">
<el-row>
<el-col :span="24">
<el-col :span="24" style="max-height: 300px; overflow: scroll;">
<el-tree
ref="corpTreeRef"
:data="item.data"
:props="defaultProps"
show-checkbox
node-key="id"
:default-expanded-keys="currentNodeKey"
:default-expanded-keys="defaultExpandedKeys"
:default-checked-keys="currentCheckedNodeKey"
:expand-on-click-node="false"
:check-on-click-node="true"
:check-strictly="true"
empty-text="暂无数据"
@check="checkNode"
......@@ -104,20 +107,21 @@
<!-- 成员选择树 -->
<div v-if="item.id === activeTabId && item.type === 'user-tree'">
<el-row>
<el-col :span="8">
<el-col :span="8" style="max-height: 300px; overflow: scroll;">
<el-tree
ref="userTreeRef"
:data="item.data"
:props="defaultProps"
node-key="id"
:default-expanded-keys="currentNodeKey"
:default-expanded-keys="defaultExpandedKeys"
:current-node-key="currentNodeKey"
:highlight-current="true"
empty-text="暂无数据"
@node-click="handleNodeClick"
style="margin-top: 10px;"
/>
</el-col>
<el-col :span="16">
<el-col :span="16" style="max-height: 300px; overflow: scroll;">
<div class="flow-checkbox-box">
<el-checkbox-group
class="flow-checkbox-group"
......@@ -138,7 +142,7 @@
</div>
<div v-if="item.id === activeTabId && item.type === 'role-list'">
<el-row>
<el-col :span="24">
<el-col :span="24" style="max-height: 300px; overflow: scroll;">
<el-checkbox-group
class="flow-checkbox-group"
v-model="checkedUserList"
......@@ -155,7 +159,7 @@
</el-col>
</el-row>
</div>
<!-- 左右选择结构 -->
<!-- TAG: 暂时不使用左右选择结构 -->
<!-- <div v-if="item.id === activeTabId && item.type === ''">
<el-tabs
tab-position="left"
......@@ -188,7 +192,6 @@
</div> -->
</div>
</div>
<!-- 激活搜索框 -->
<div v-else>
<el-checkbox-group
class="flow-checkbox-group"
......@@ -232,7 +235,8 @@ const userTreeRef = ref(null); // 成员选择树的ref
const dialogUserFormVisible = ref(false);
const userTags = ref([]); // 现在只维护选中的用户列表，以它为基准维护其他列表选中情况
const currentNodeKey = ref([]); // 当前展开的节点
const defaultExpandedKeys = ref([]); // 当前展开的节点
const currentNodeKey = ref([]); // 当前选中的节点
const currentCheckedNodeKey = ref([]); // 当前选中的节点
const activeTabId = ref("tab-corp"); // TODO: 需要获取默认第一个ID
const activeTabIdx = ref(0); // 默认激活tab的index
......@@ -306,249 +310,14 @@ onMounted(async () => {
item.data = roleList.value;
}
});
// 根据数据获取选中的tag标签
// setTagsList(userTabs);
// TODO: 查询到的用户选中列表数据
// TODO: 查询到的用户选中列表数据，等待接口数据
userTags.value = [{ id: 35697, name: "西园寺" },{ id: 492081, name: "营员" }];
// //
// const role_raw_data = [
// {
// "id": 624337,
// "name": "八关斋戒"
// },
// {
// "id": 82983,
// "name": "场地管理"
// },
// {
// "id": 83245,
// "name": "场地使用"
// },
// ];
// let role_list = ref([]);
// role_raw_data.forEach(item => {
// role_list.value.push({
// id: item.id,
// label: item.name,
// checked: false,
// disabled: false
// })
// })
// const role_data = ref({
// id: "tab-2",
// label: "角色",
// type: "select",
// data: [
// {
// id: "",
// label: "",
// children: [],
// list: role_list.value
// },
// ]
// })
// TODO: 查询到的用户列表数据
// userTabs.value = [
// {
// id: "tab-0",
// label: "组织架构",
// type: "corp-tree",
// data: [
// {
// id: "corp-1",
// label: "组织结构 1",
// children: [
// {
// id: "dept-1-1",
// label: "组织结构 1-1",
// children: [],
// list: [
// {
// id: "user-1-1",
// label: "组织1-1",
// checked: false,
// disabled: false
// },
// {
// id: "user-1-2",
// label: "组织1-2",
// checked: false,
// disabled: false
// },
// {
// id: "user-1-3",
// label: "组织1-3",
// checked: false,
// disabled: true
// }
// ]
// }
// ]
// },
// {
// id: "dept-2",
// label: "上级部门 2",
// children: [
// {
// id: "dept-2-1",
// label: "部门名称 2-1",
// children: [],
// list: [
// {
// id: "user-2-1",
// label: "用户2-1",
// checked: false,
// disabled: false
// },
// {
// id: "user-2-2",
// label: "用户2-2",
// checked: false,
// disabled: false
// },
// {
// id: "user-2-3",
// label: "用户2-3",
// checked: false,
// disabled: true
// }
// ]
// }
// ]
// }
// ]
// },
// {
// id: "tab-1",
// label: "成员",
// type: "user-tree",
// data: [
// {
// id: "dept-1",
// label: "上级部门 1",
// children: [
// {
// id: "dept-1-1",
// label: "部门名称 1-1",
// children: [],
// list: [
// {
// id: "user-1-1",
// label: "用户1-1",
// checked: false,
// disabled: false
// },
// {
// id: "user-1-2",
// label: "用户1-2",
// checked: false,
// disabled: false
// },
// {
// id: "user-1-3",
// label: "用户1-3",
// checked: false,
// disabled: true
// }
// ]
// }
// ]
// },
// {
// id: "dept-2",
// label: "上级部门 2",
// children: [
// {
// id: "dept-2-1",
// label: "部门名称 2-1",
// children: [],
// list: [
// {
// id: "user-2-1",
// label: "用户2-1",
// checked: false,
// disabled: false
// },
// {
// id: "user-2-2",
// label: "用户2-2",
// checked: false,
// disabled: false
// },
// {
// id: "user-2-3",
// label: "用户2-3",
// checked: false,
// disabled: true
// }
// ]
// }
// ]
// }
// ]
// },
// {
// id: "tab-2",
// label: "角色",
// type: "role-list",
// data: [
// {
// id: "role-1-1",
// label: "流程发起人",
// children: [],
// list: [
// {
// id: "user-1-1",
// label: "用户1-1",
// checked: true,
// disabled: false
// },
// {
// id: "user-2-2",
// label: "用户2-2",
// checked: false,
// disabled: false
// },
// {
// id: "role-1-4",
// label: "选项 C",
// checked: false,
// disabled: true
// }
// ]
// },
// {
// id: "role-1-2",
// label: "成员字段",
// children: [],
// list: []
// },
// {
// id: "role-1-3",
// label: "部门字段",
// children: [],
// list: []
// },
// {
// id: "role-1-4",
// label: "主管",
// children: [],
// list: []
// }
// ]
// }
// ];
// userTabs.value = userTabs.value.concat(role_data.value);
// 对比选中的用户的 ID，选中的 ID 同步状态到 userTabs 的数据结构上
// userTags.value.forEach(ele => {
// modifyFieldValue(userTabs.value, "id", ele.id, "checked", true);
// });
// TODO: 组织结构处理可能需要优化
// 因为第一个是组织结构树，默认展开第一个节点
// 第一项目是组织结构树，默认展开第一个节点
if (userTabs.value[activeTabIdx.value]['type'] === 'corp-tree') {
if (userTabs.value[activeTabIdx.value]['data'].length) {
currentNodeKey.value = [userTabs.value[activeTabIdx.value]['data'][0]['id']];
// 把选中的节点注入树结构显示选中状态
// 默认展开第一个节点
defaultExpandedKeys.value = [userTabs.value[activeTabIdx.value]['data'][0]['id']];
// 把用户选中的节点注入树结构显示选中状态
nextTick(() => {
currentCheckedNodeKey.value = userTags.value.map(ele => ele.id);
});
......@@ -565,6 +334,18 @@ watch(() => {
}
});
watch(
// TAG: watch dialogUserFormVisible.value 监听弹框显示，修改tab文字宽度
() => dialogUserFormVisible.value,
val => {
if (val) {
nextTick(() => {
tabTextWidth.value = $("#" + activeTabId.value).width() + "px";
});
}
}
);
/**
* 点击Tab切换回调
*
......@@ -573,10 +354,11 @@ watch(() => {
* @param {number} idx - The index of the clicked tab.
*/
const handleTabClick = (tab, event, idx) => {
// tabSelectData.value = tab.data; // tab选中数据提供给list类型使用
tabSelectData.value = tab.data; // tab选中数据提供给左右选择结构使用
userList.value = []; // 清空用户列表
checkedUserList.value = []; // 清空选中用户列表
activeTabContent.value = ""; // 清空侧边栏显示
defaultExpandedKeys.value = []; // 清空树形的默认展开
currentNodeKey.value = []; // 清空树形的默认展开
// 设置当前激活的tab
userTabType.value = tab.type;
......@@ -590,26 +372,32 @@ const handleTabClick = (tab, event, idx) => {
}
// 文字宽度
tabTextWidth.value = $("#" + tab.id).width() + "px";
//
console.warn(tab);
// 组织结构树，默认展开第一个节点, 把选中用户ID显示到数
// 组织结构树
if (tab.type === 'corp-tree') {
if (tab.data.length) {
currentNodeKey.value = [tab.data[0]['id']];
// 默认展开第一个节点
defaultExpandedKeys.value = [tab.data[0]['id']];
nextTick(() => {
// 把选中的节点注入树结构显示选中状态
// 把用户选中的节点注入树结构显示选中状态
corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
})
});
}
}
// 成员选择树
if (tab.type === 'user-tree') {
if (tab.data.length) {
currentNodeKey.value = [tab.data[0]['id']];
// 默认展开第一个节点
defaultExpandedKeys.value = [tab.data[0]['id']];
// 当前选中的节点
currentNodeKey.value = tab.data[0]['id'];
// 多选列表数据展示
userList.value = tab.data[0]['user'];
checkedUserList.value = userTags.value.map(ele => ele.id);
}
}
// 角色选择列表
if (tab.type === 'role-list') {
// 多选列表数据展示
userList.value = tab.data;
checkedUserList.value = userTags.value.map(ele => ele.id);
}
......@@ -621,22 +409,21 @@ const handleTabClick = (tab, event, idx) => {
* @param {type} tab - description of parameter
* @param {type} event - description of parameter
*/
const handleTabContentClick = (tab, event) => {
tabSelectData.value.forEach(ele => {
if (ele.name === tab.props.name) {
console.warn(ele);
// 设置右侧显示数据
userList.value = ele.list;
checkedUserList.value = ele.list
.filter(ele => {
return ele.checked;
})
.map(ele => {
return ele.id;
});
}
});
};
// const handleTabContentClick = (tab, event) => {
// tabSelectData.value.forEach(ele => {
// if (ele.name === tab.props.name) {
// // 设置右侧显示数据
// userList.value = ele.list;
// checkedUserList.value = ele.list
// .filter(ele => {
// return ele.checked;
// })
// .map(ele => {
// return ele.id;
// });
// }
// });
// };
/**
* 成员选择树 点击回调
......@@ -653,20 +440,18 @@ const handleNodeClick = data => {
return ele.id;
});
// 默认展开相应ID节点
currentNodeKey.value = [data.id];
defaultExpandedKeys.value = [data.id];
}
};
/**
* 组织结构树形结构 选中回调
* 组织结构树 选中回调
*
* @param {*} obj 传递给 data 属性的数组中该节点所对应的对象
* @param {*} status 树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
* @return {void}
*/
const checkNode = (obj, status) => {
// console.log(obj);
// console.log(status);
// 判断当前节点是选中还是取消选中
if (status.checkedKeys.indexOf(obj.id) > -1) { // 选中
// 新增勾选的用户
......@@ -693,22 +478,22 @@ const checkNode = (obj, status) => {
* @param {any} targetName - 目标字段
* @param {any} newValue - 修改新值
*/
function modifyFieldValue(obj, fieldName, fieldValue, targetName, 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, fieldValue, targetName, newValue);
}
}
}
// function modifyFieldValue(obj, fieldName, fieldValue, targetName, 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, fieldValue, targetName, newValue);
// }
// }
// }
/**
* 操作勾选框回调
* 勾选框 操作回调
*
* @param {type} user - description of parameter
* @param {type} checked - description of parameter
......@@ -733,67 +518,35 @@ const handleCheckedUserListChange = (user, checked) => {
* @param {Array} arr - The array to traverse.
* @return {Array} - The list items found.
*/
function getAllListItems(arr) {
var result = [];
function recursiveGetListItems(subArr) {
for (var i = 0; i < subArr.length; i++) {
var item = subArr[i];
if (item.list && Array.isArray(item.list)) {
result = result.concat(item.list);
}
if (item.children && Array.isArray(item.children)) {
recursiveGetListItems(item.children);
}
}
}
recursiveGetListItems(arr);
return result;
}
/**
* 根据 userTabs 的选中状态，更新 tag 选中列表显示
* 获取生成 list 集合的 checked 状态，生成 tags 的勾选显示
*
* @param {Array} val - userTabs
*/
const setTagsList = val => {
let userList = []; // 存储所有的list数据
val.forEach(ele => {
let data = getAllListItems(ele.data);
userList.push(data);
});
// 合并成一维数组列表
userList = [...userList.flat()];
// 如果ID相同，需要数据去重
let uniqueArray = userList.filter(
(value, index, self) => index === self.findIndex(obj => obj.id === value.id)
);
// 勾选变化后同步到选中列表
userTags.value = uniqueArray
.filter(ele => {
return ele.checked;
})
.map(ele => {
return {
id: ele.id,
name: ele.name
};
});
};
watch(
// TAG: watch userTabs.value 监听数据结构选中值变化
() => userTabs.value,
val => {
if (val) {
// 更新 tags 选中列表显示
// setTagsList(val);
}
},
{ deep: true }
);
// function getAllListItems(arr) {
// var result = [];
// function recursiveGetListItems(subArr) {
// for (var i = 0; i < subArr.length; i++) {
// var item = subArr[i];
// if (item.list && Array.isArray(item.list)) {
// result = result.concat(item.list);
// }
// if (item.children && Array.isArray(item.children)) {
// recursiveGetListItems(item.children);
// }
// }
// }
// recursiveGetListItems(arr);
// return result;
// }
// watch(
// // TAG: watch userTabs.value 监听数据结构选中值变化
// () => userTabs.value,
// val => {
// if (val) {
// }
// },
// { deep: true }
// );
/**
* 移除 tags 成员标签回调
......@@ -810,14 +563,18 @@ const handleTagClose = tag => {
corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
break;
case 'tab-uer': // 成员
checkedUserList.value = userTags.value
.map(ele => {
return ele.id;
});
break;
case 'tab-role': // 角色
checkedUserList.value = userTags.value
.map(ele => {
return ele.id;
});
break;
}
// // 移除数据结构中的选中值
// modifyFieldValue(userTabs.value, "id", tag.id, "checked", false);
// // ID集合
// let tagsId = userTags.value.map(ele => {
// return ele.id;
......@@ -951,18 +708,6 @@ const onSearch = () => {
// 如果 tags 里存在的值，需要在搜索列表中勾选
checkSearchStatus();
};
watch(
// TAG: watch dialogUserFormVisible.value 监听弹框显示，修改tab文字宽度
() => dialogUserFormVisible.value,
val => {
if (val) {
nextTick(() => {
tabTextWidth.value = $("#" + activeTabId.value).width() + "px";
});
}
}
);
</script>
<style lang="scss">
......@@ -1069,7 +814,7 @@ watch(
.flow-checkbox-box {
border-left: 2px solid #e4e7ed;
width: 2px;
/* width: 2px; */
height: 100%;
padding-left: 10px;
}
......
File mode changed
......@@ -11,6 +11,7 @@
"noImplicitAny": false,
"strictNullChecks": false,
"allowSyntheticDefaultImports": true,
"allowJs": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
......