DeXun/klp-oa
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

多选框右侧显示bug

Browse Source
This commit is contained in:
jhd
2026-05-22 12:08:28 +08:00
parent 35e4e4bbb0
commit fe5188e8fc
1 changed files with 54 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
klp-ui/src/components/EmployeeSelector/index.vue
View File

@@ -220,25 +220,25 @@ export default {
availableList() {
const duplicates = this.duplicateNames
return this.rawEmployeeList.map(employee => {
// 直接使用 infoId 作为唯一标识
const employeeId = employee.infoId
// 使用 keyField 作为唯一标识
const employeeId = employee[this.keyField]
const idStr = String(employeeId)
return {
...employee,
disabled: this.disabledIdList.includes(idStr),
isDuplicate: duplicates.includes(employee.name || ''),
isSelected: this.selectedIds.some(id => String(id) === idStr)
isSelected: this.selectedIds.includes(idStr)
}
})
},
// 已选列表
selectedList() {
const duplicates = this.duplicateNames
// 使用 infoId 作为唯一标识，支持同名不同ID的员工
// 使用 keyField 作为唯一标识，支持同名不同ID的员工
return this.selectedIds
.map(id => {
const idStr = String(id)
const matched = this.rawEmployeeList.filter(item => String(item.infoId) === idStr)
const matched = this.rawEmployeeList.filter(item => String(item[this.keyField]) === idStr)
const employee = matched.length > 0 ? matched[0] : null
if (employee) {
// 创建新对象，避免修改原始数据
@@ -281,12 +281,11 @@ export default {
handler(newVal) {
if (this.multiple) {
if (newVal) {
// 处理重名问题：确保ID是唯一标识，转换为正确类型
// 统一使用字符串类型的ID
this.selectedIds = newVal.split(',').map(id => {
const trimmedId = id.trim()
if (!trimmedId) return null
const numId = Number(trimmedId)
return isNaN(numId) ? trimmedId : numId
return String(trimmedId)
}).filter(id => id !== null)
} else {
this.selectedIds = []
@@ -306,12 +305,37 @@ export default {
methods: {
toggleDialog() {
if (!this.open) {
// 打开时清空选中状态
// 清空临时勾选状态
this.leftSelectedKeys = []
this.rightSelectedKeys = []
this.getEmployeeList()
if (this.rawEmployeeList.length > 0) {
// 如果列表已加载，直接恢复选中状态
this.restoreSelectedIds()
this.open = true
} else {
// 如果列表未加载，先加载再恢复
this.getEmployeeList().then(() => {
this.restoreSelectedIds()
this.open = true
})
}
} else {
this.open = false
}
},
// 恢复选中状态
restoreSelectedIds() {
if (this.multiple && this.value) {
this.selectedIds = this.value.split(',').map(id => {
const trimmedId = id.trim()
if (!trimmedId) return null
return String(trimmedId)
}).filter(id => id !== null)
} else {
this.selectedIds = []
}
this.open = !this.open
},
getEmployeeList() {
@@ -335,11 +359,6 @@ export default {
})
})
},
// 判断员工是否已离职
isEmployeeResigned(employee) {
// 支持多种可能的离职状态字段
return employee.status === 1 || employee.isLeave === true || employee.resignStatus === 1 || employee.leaveStatus === 1
},
handleSearch() {
},
@@ -399,18 +418,18 @@ export default {
// 判断左侧是否选中
isLeftSelected(item) {
return this.leftSelectedKeys.includes(item.infoId)
return this.leftSelectedKeys.includes(String(item[this.keyField]))
},
// 判断右侧是否选中
isRightSelected(item) {
return this.rightSelectedKeys.includes(item.infoId)
return this.rightSelectedKeys.includes(String(item[this.keyField]))
},
// 切换左侧选中状态
toggleItem(item) {
if (item.disabled) return
const key = item.infoId
const key = String(item[this.keyField])
const index = this.leftSelectedKeys.indexOf(key)
if (index > -1) {
this.leftSelectedKeys.splice(index, 1)
@@ -421,7 +440,7 @@ export default {
// 切换右侧选中状态
toggleSelectedItem(item) {
const key = item.infoId
const key = String(item[this.keyField])
const index = this.rightSelectedKeys.indexOf(key)
if (index > -1) {
this.rightSelectedKeys.splice(index, 1)
@@ -433,25 +452,20 @@ export default {
// 添加单个到已选
addToSelected(item) {
if (item.disabled) return
// 直接使用 infoId 作为唯一标识
const key = item.infoId
const keyStr = String(key)
// 检查是否已存在（字符串比较）
const exists = this.selectedIds.some(id => String(id) === keyStr)
// 统一使用字符串类型的ID
const key = String(item[this.keyField])
// 检查是否已存在
const exists = this.selectedIds.includes(key)
if (!exists) {
this.selectedIds.push(key)
console.log('添加员工:', item.name, 'ID:', key, 'selectedIds:', this.selectedIds)
} else {
console.log('员工已存在:', item.name, 'ID:', key)
}
},
// 从已选移除单个
removeFromSelected(item) {
// 直接使用 infoId 作为唯一标识
const key = item.infoId
const keyStr = String(key)
const index = this.selectedIds.findIndex(id => String(id) === keyStr)
// 统一使用字符串类型的ID
const key = String(item[this.keyField])
const index = this.selectedIds.indexOf(key)
if (index > -1) {
this.selectedIds.splice(index, 1)
}
@@ -461,8 +475,8 @@ export default {
addSelected() {
this.leftSelectedKeys.forEach(key => {
const keyStr = String(key)
if (!this.selectedIds.some(id => String(id) === keyStr)) {
this.selectedIds.push(key)
if (!this.selectedIds.includes(keyStr)) {
this.selectedIds.push(keyStr)
}
})
this.leftSelectedKeys = []
@@ -472,7 +486,7 @@ export default {
removeSelected() {
this.rightSelectedKeys.forEach(key => {
const keyStr = String(key)
const index = this.selectedIds.findIndex(id => String(id) === keyStr)
const index = this.selectedIds.indexOf(keyStr)
if (index > -1) {
this.selectedIds.splice(index, 1)
}
@@ -484,9 +498,9 @@ export default {
addAll() {
this.availableList.forEach(item => {
if (!item.disabled && !item.isSelected) {
const keyStr = String(item.infoId)
if (!this.selectedIds.some(id => String(id) === keyStr)) {
this.selectedIds.push(item.infoId)
const keyStr = String(item[this.keyField])
if (!this.selectedIds.includes(keyStr)) {
this.selectedIds.push(keyStr)
}
}
})
@@ -511,11 +525,11 @@ export default {
cancelSelection() {
if (this.multiple) {
if (this.value) {
// 统一使用字符串类型
this.selectedIds = this.value.split(',').map(id => {
const trimmedId = id.trim()
if (!trimmedId) return null
const numId = Number(trimmedId)
return isNaN(numId) ? trimmedId : numId
return String(trimmedId)
}).filter(id => id !== null)
} else {
this.selectedIds = []