hookehuyr

组织结构的控件搜索时,显示角色列表的内容优化

<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-07-27 19:44:50
* @LastEditTime: 2024-07-30 09:52:32
* @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
* @Description: 树形组件
-->
......@@ -188,7 +188,7 @@
<div>
<p>成员</p>
<div style="border-top: 1px solid #eee; margin: 0.5rem 0;"></div>
<div style="margin-bottom: 1rem;">
<div style="margin-bottom: 1rem; overflow: auto;">
<van-checkbox
@click="onSearchResultClick(user, $event)"
v-for="(user) in user_dept_role.user"
......@@ -198,7 +198,15 @@
:key="user.id"
:name="user.id"
shape="square" icon-size="13px" :checked-color="styleColor.baseColor" style="margin-bottom: 0.5rem;">
{{ user.name }}
<div class="van-ellipsis" :style="{ maxWidth: maxWidth + 'px' }">
<span>{{ user.name }}</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>
<span v-if="user.role_list.length">/
<span v-for="(role, index) in user?.role_list" :key="role.id">{{ role.name }}&nbsp;</span>
</span>
</div>
</van-checkbox>
<div v-if="!user_dept_role.user.length" style="color: #999;">暂无数据</div>
</div>
......@@ -271,6 +279,8 @@ const tabList = computed(() => {
return arr;
});
const maxWidth = ref(0);
onMounted(async () => {
// TAG: 获取后台数据
const flowDeptList = await getFlowDeptListAPI({ form_code: $route.query.code });
......@@ -297,6 +307,10 @@ onMounted(async () => {
// 发送到表单数据
tree_select_value.value = [].concat(...Object.values(emitCheckedGroup.value));
}
// 获取宽度处理成员角色值可能太长显示问题
nextTick(() => {
maxWidth.value = $('.select-tree-box').width();
})
});
const openTree = () => {
......