fix(admin-vue): 编辑用户菜单权限已授权回显失效——树数据就绪后 await nextTick 再 setCheckedKeys(el-tree store 异步同步 props.data,旧实现作用在空 store 上勾选丢失),补源码断言防回归测试
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, onMounted, ref, watch } from 'vue'
|
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
||||||
import type { MenuOptionNode } from './user-menu-auth'
|
import type { MenuOptionNode } from './user-menu-auth'
|
||||||
import { compactDirectGrantIds } from './user-menu-auth'
|
import { compactDirectGrantIds } from './user-menu-auth'
|
||||||
import { fetchGrantableMenus } from './user-menu-auth-api'
|
import { fetchGrantableMenus } from './user-menu-auth-api'
|
||||||
@@ -43,8 +43,11 @@ async function load(): Promise<void> {
|
|||||||
try {
|
try {
|
||||||
data.value = await fetchGrantableMenus()
|
data.value = await fetchGrantableMenus()
|
||||||
loaded.value = true
|
loaded.value = true
|
||||||
applyChecked()
|
|
||||||
emit('load', true)
|
emit('load', true)
|
||||||
|
// el-tree 的 store 通过异步 watch 同步 props.data,setCheckedKeys 必须等树
|
||||||
|
// 渲染完成后再应用已勾选 id,否则作用在空 store 上导致已授权不回显。
|
||||||
|
await nextTick()
|
||||||
|
applyChecked()
|
||||||
} catch {
|
} catch {
|
||||||
loaded.value = false
|
loaded.value = false
|
||||||
emit('load', false)
|
emit('load', false)
|
||||||
|
|||||||
@@ -36,3 +36,15 @@ test('align_user_menu_auth_both_types_fetch_and_submit_source', () => {
|
|||||||
const auth = readSource('src/pages/account/user-menu-auth.ts')
|
const auth = readSource('src/pages/account/user-menu-auth.ts')
|
||||||
assert.match(auth, /type: string/, '授权节点携带 type')
|
assert.match(auth, /type: string/, '授权节点携带 type')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test('align_user_menu_auth_echo_waits_tree_render', () => {
|
||||||
|
// 验收反馈:编辑用户时已授权菜单无回显——load() 在 data 赋值后同步 setCheckedKeys,
|
||||||
|
// el-tree 的 store 异步同步 props.data,勾选作用在空 store 上丢失。
|
||||||
|
// 修复:data 就绪后先 await nextTick() 再 applyChecked()。
|
||||||
|
const tree = readSource('src/pages/account/UserMenuAuthTree.vue')
|
||||||
|
const loadBlock = tree.slice(tree.indexOf('async function load'), tree.indexOf('catch {', tree.indexOf('async function load')))
|
||||||
|
assert.match(loadBlock, /await nextTick\(\).*applyChecked\(\)/s, '树数据就绪后等渲染完成再应用已勾选 id')
|
||||||
|
assert.ok(loadBlock.indexOf('await nextTick') < loadBlock.indexOf('applyChecked()'), 'nextTick 先于 applyChecked')
|
||||||
|
assert.match(tree, /watch\(/, 'checked 变化时仍兜底回显')
|
||||||
|
assert.match(tree, /if \(loaded\.value\) applyChecked\(\)/, '兜底回显仅在树加载完成后')
|
||||||
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user