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

hookehuyr
Commit 6c84061172d29af682167bdc9a83612119a645b9 6c840611 1 parent f2b06abe
Showing 2 changed files with 42 additions and 5 deletions
doc/index.vue
doc/selectUserView.vue
--- a/doc/index.vue
View file @6c84061
+++ b/doc/index.vue
View file @6c84061
@@ -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>
--- a/doc/selectUserView.vue
View file @6c84061
+++ b/doc/selectUserView.vue
View file @6c84061
 <!--
  * @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>