Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6c840611 1 parent f2b06abe

fix 优化组织结构显示，成员的信息把他的角色都显示出来

Inline Side-by-side
Showing 2 changed files with 42 additions and 5 deletions
......@@ -109,7 +109,15 @@
<el-icon v-if="tag.type === 'dept'" style="height: 13px; display: inline-block; vertical-align: middle; line-height: 10px;"><House /></el-icon>
<el-icon v-if="tag.type === 'role'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><Female /></el-icon>
<el-icon v-if="tag.type === 'user'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><User /></el-icon>
<span style="margin-left: 2px; height: 10px; display: inline-block; vertical-align: middle; line-height: 10px;">{{ tag.name }}</span>
<span style="margin-left: 2px; height: 10px; display: inline-block; vertical-align: middle; line-height: 10px;">
<span>{{ tag.name }}</span>
<span v-if="tag?.role_list?.length">/
<span v-for="(role, index) in tag?.role_list" :key="role.id">
{{ role.name }}
<span v-if="index !== (tag?.role_list?.length - 1)">,</span>
</span>
</span>
</span>
</el-tag>
<div v-else class="text-empty">请选择成员</div>
</div>
......
<!--
* @Date: 2023-11-01 10:18:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-07-25 13:47:43
* @LastEditTime: 2024-07-30 16:28:12
* @FilePath: /vue-flow-editor/doc/selectUserView.vue
* @Description: 成员列表选择控件
-->
......@@ -23,7 +23,15 @@
<el-icon v-if="tag.type === 'dept'" style="display: inline-block; vertical-align: middle; height: 13px;"><House /></el-icon>
<el-icon v-if="tag.type === 'role'" style="display: inline-block; vertical-align: middle; height: 12px;"><Female /></el-icon>
<el-icon v-if="tag.type === 'user'" style="display: inline-block; vertical-align: middle; height: 12px;"><User /></el-icon>
<span style="margin-left: 2px;display: inline-block; vertical-align: middle; line-height: 10px; height: 10px;">{{ tag.name }}</span>
<span style="margin-left: 2px;display: inline-block; vertical-align: middle; line-height: 10px; height: 10px;">
<span>{{ tag.name }}</span>
<span v-if="tag?.role_list?.length">/
<span v-for="(role, index) in tag?.role_list" :key="role.id">
{{ role.name }}
<span v-if="index !== (tag?.role_list?.length - 1)">,</span>
</span>
</span>
</span>
</el-tag>
<div v-else class="text-empty">请选择成员</div>
</div>
......@@ -255,7 +263,16 @@
:checked="user.checked"
@change="handleCheckedUserListChange(user, $event)"
>
{{ user.name }}
<!-- <div class="el-ellipsis" :style="{ maxWidth: maxWidth + 'px' }"> -->
<div>
<span>{{ user.name }}</span>
<span v-if="user.role_list.length">/
<span v-for="(role, index) in user?.role_list" :key="role.id">{{ role.name }}&nbsp;</span>
</span>
<span v-if="user?.dept_list.length">/
<span v-for="(dept, index) in user?.dept_list" :key="dept.id">{{ dept.name }}&nbsp;</span>
</span>
</div>
</el-checkbox>
</template>
<template v-else>
......@@ -345,6 +362,7 @@ const getRoleList = () => {
const deptList = ref([]); // 部门列表
const deptUserList = ref([]); // 部门用户列表
const roleList = ref([]); // 角色列表
const maxWidth = ref(0);
onMounted(async () => {
// API获取后台数据
......@@ -424,6 +442,11 @@ watch(
});
}
}
// 获取宽度处理成员角色值可能太长显示问题
nextTick(() => {
maxWidth.value = ($('.search_box').width() - 50);
});
}
}
);
......@@ -614,7 +637,7 @@ const checkNode = (obj, status) => {
*/
const handleCheckedUserListChange = (user, checked) => {
if (checked) { // 新增勾选的用户
userTags.value = userTags.value.concat({ id: user.id, name: user.name, type: user.type });
userTags.value = userTags.value.concat({ id: user.id, name: user.name, type: user.type, role_list: user?.role_list?.length ? user?.role_list : [] });
// 如果ID相同，需要数据去重
userTags.value = _.uniqBy(userTags.value, 'id');
} else {
......@@ -975,4 +998,10 @@ const onSearchInput = (val) => {
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #009688!important;
}
.el-ellipsis {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
}
</style>
......