|
|
@@ -34,11 +34,8 @@ const props = defineProps({
|
|
|
const emits = defineEmits(['update:modelValue', 'node-click'])
|
|
|
|
|
|
const deptName = ref('')
|
|
|
-
|
|
|
const deptList = ref<Tree[]>([])
|
|
|
-
|
|
|
const treeRef = ref<InstanceType<typeof ElTree>>()
|
|
|
-
|
|
|
const expandedKeys = ref<number[]>([])
|
|
|
|
|
|
const sortTreeBySort = (treeNodes: Tree[]) => {
|
|
|
@@ -61,30 +58,49 @@ const loadTree = async () => {
|
|
|
try {
|
|
|
let id = props.deptId
|
|
|
|
|
|
+ // 1. 校验 ID 范围逻辑 (保持原有逻辑:确保 deptId 在 topId 范围内)
|
|
|
if (id !== props.topId) {
|
|
|
const depts = await DeptApi.specifiedSimpleDepts(props.topId)
|
|
|
-
|
|
|
const self = depts.find((item) => item.id === props.deptId)
|
|
|
-
|
|
|
if (depts.length && !self) {
|
|
|
id = props.topId
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 2. 获取最终 ID 对应的部门列表
|
|
|
+ const res = await DeptApi.specifiedSimpleDepts(id)
|
|
|
+
|
|
|
+ // 3. 处理 modelValue 的赋值逻辑 (关键修改点)
|
|
|
if (props.initSelect) {
|
|
|
- emits('update:modelValue', id)
|
|
|
+ // 检查传入的 modelValue 是否存在于当前加载的树数据中
|
|
|
+ const isModelValueValid = props.modelValue && res.some((item) => item.id === props.modelValue)
|
|
|
+
|
|
|
+ if (isModelValueValid) {
|
|
|
+ // A. 如果传入了值,且该值在当前树结构中,不做修改,保留原值
|
|
|
+ // 这里不需要 emit,因为值没变
|
|
|
+ } else {
|
|
|
+ // B. 如果没有传入值,或者传入的值不在当前树结构中,强制选中根节点
|
|
|
+ emits('update:modelValue', id)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- const res = await DeptApi.specifiedSimpleDepts(id)
|
|
|
+ // 4. 生成树结构
|
|
|
deptList.value = sortTreeBySort(handleTree(res))
|
|
|
|
|
|
- // 加载完成后,如果有选中值,尝试高亮并展开
|
|
|
+ // 5. 界面交互:高亮并展开
|
|
|
nextTick(() => {
|
|
|
- if (props.modelValue && treeRef.value) {
|
|
|
- treeRef.value.setCurrentKey(props.modelValue)
|
|
|
- expandedKeys.value = [props.modelValue] // 默认展开选中的节点
|
|
|
+ // 优先使用 props.modelValue (如果刚才触发了 update,父组件可能还没传回来,所以这里取 props.modelValue 或者 id)
|
|
|
+ // 但为了稳妥,我们再次检查逻辑
|
|
|
+ const targetKey = props.modelValue ? props.modelValue : props.initSelect ? id : null
|
|
|
+
|
|
|
+ if (targetKey && treeRef.value) {
|
|
|
+ treeRef.value.setCurrentKey(targetKey)
|
|
|
+ // 确保该节点被展开
|
|
|
+ if (!expandedKeys.value.includes(targetKey)) {
|
|
|
+ expandedKeys.value.push(targetKey)
|
|
|
+ }
|
|
|
} else if (deptList.value.length > 0) {
|
|
|
- // 默认展开第一级
|
|
|
+ // 如果没有选中项,默认展开第一级
|
|
|
expandedKeys.value = deptList.value.map((item) => item.id)
|
|
|
}
|
|
|
})
|
|
|
@@ -94,19 +110,15 @@ const loadTree = async () => {
|
|
|
}
|
|
|
|
|
|
const handleNodeClick = (data: Tree) => {
|
|
|
- // 1. 更新 v-model
|
|
|
emits('update:modelValue', data.id)
|
|
|
- // 2. 抛出点击事件供父组件其他用途
|
|
|
emits('node-click', data)
|
|
|
}
|
|
|
|
|
|
-/** 筛选节点逻辑 */
|
|
|
const filterNode = (value: string, data: Tree) => {
|
|
|
if (!value) return true
|
|
|
return data.name.includes(value)
|
|
|
}
|
|
|
|
|
|
-/** 监听输入框进行过滤 */
|
|
|
watch(deptName, (val) => {
|
|
|
treeRef.value?.filter(val)
|
|
|
})
|
|
|
@@ -124,9 +136,7 @@ watch(
|
|
|
() => props.modelValue,
|
|
|
(newVal) => {
|
|
|
if (newVal && treeRef.value) {
|
|
|
- // 设置高亮
|
|
|
treeRef.value.setCurrentKey(newVal)
|
|
|
- // 自动展开该节点 (将新ID加入展开数组)
|
|
|
if (!expandedKeys.value.includes(newVal)) {
|
|
|
expandedKeys.value.push(newVal)
|
|
|
}
|
|
|
@@ -135,9 +145,7 @@ watch(
|
|
|
{ immediate: true }
|
|
|
)
|
|
|
|
|
|
-/** 初始化 */
|
|
|
onMounted(() => {
|
|
|
- console.log('props :>> ', props)
|
|
|
loadTree()
|
|
|
})
|
|
|
</script>
|