修复所在组bug

This commit is contained in:
chenxing
2026-08-17 17:19:04 +08:00
parent b96bbc9a62
commit 0fa4b0f38a
2 changed files with 42 additions and 14 deletions
+3 -2
View File
@@ -257,8 +257,9 @@ function showAddUser() {
/* ================= 编辑 ================= */
const editRef = ref();
function handleEdit(row: any) {
// 当前点击所在的组(SysUserVo 不含 groupId,故以左侧选中节点为准,供"所在组"只读展示并默认选中)
const curGroupId = selectedNode.value?.id ?? null;
// 当前点击所在的组:优先用选中节点 id,兜底用当前正在浏览的组(dataParams.groupId,
// 由 onTreeChange 设置,比 selectedNode 更可靠),供"所在组"只读展示与兜底
const curGroupId = selectedNode.value?.id ?? dataParams.value.groupId ?? null;
editRef.value?.open(row, groupOptions.value, curGroupId, () => {
tableRef.value?.reloadData(OperatorEnum.edit);
});
+39 -12
View File
@@ -61,9 +61,10 @@
<Row v-if="isEdit">
<Col span="24">
<FormItem label="所在组(只读):">
<Select :value="userGroupIds" multiple disabled transfer class="group-readonly">
<Option v-for="g in userGroups" :key="g.id" :value="g.id" :label="g.name" />
</Select>
<div class="group-readonly-box" :title="userGroups.map(g => g.name).join(' / ')">
<span v-for="g in userGroups" :key="g.id" class="group-readonly-tag">{{ g.name }}</span>
<span v-if="userGroups.length === 0" class="group-readonly-empty">—</span>
</div>
</FormItem>
</Col>
</Row>
@@ -155,9 +156,6 @@ watch(() => props.initForm, (val) => {
}
}, { immediate: true, deep: true });
// 所在组(只读) 多选值:用户全部所属组的 ID 列表
const userGroupIds = computed(() => (props.userGroups || []).map(g => g.id));
/* ---------- 用户身份(业务身份多选)---------- */
const userTypeOptions = [
{ value: 1, label: '管理员' },
@@ -299,14 +297,43 @@ function onVisibleChange(val: boolean) {
gap: 0 18px;
}
/* 所在组(只读):保留 disabled(防止误删标签),但去掉灰底灰字,显示为正常白底深色 */
.user-form :deep(.group-readonly.ivu-select-disabled .ivu-select-selection) {
background-color: #fff;
color: #515a6e;
/* 所在组(只读):白底圆角盒子 + 标签展示,视觉等同只读 Select。
改用纯 Vue 渲染,彻底绕开 view-ui-plus disabled+multiple Select
在「空数据挂载后异步补选项」时不重渲染已选标签的渲染竞态。 */
.group-readonly-box {
min-height: 32px;
border: 1px solid #dcdee2;
border-radius: 4px;
background: #fff;
padding: 3px 7px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
cursor: default;
transition: border-color .2s ease;
}
.user-form :deep(.group-readonly.ivu-select-disabled .ivu-select-arrow) {
display: none;
.group-readonly-tag {
display: inline-flex;
align-items: center;
height: 24px;
line-height: 22px;
padding: 0 8px;
border: 1px solid #e3e5e8;
border-radius: 3px;
background: #f7f7f7;
color: #515a6e;
font-size: 12px;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.group-readonly-empty {
color: #c5c8ce;
font-size: 13px;
line-height: 24px;
}
</style>