/** * 分配权限抽屉（UserPowerDrawer）：头部结构 + 账号级批量操作。 * * 数据加载与保存由本组件负责（面板只读展示），测试只锁这几件事： * 1. 头部常规显示：左侧账号标识标题 + 右侧关闭按钮，页签在内容区顶部； * 2. 页签行右端的三个账号级批量按钮（全授权 / 全禁用 / 清空权限）：挂在 Tabs 的 * rightExtra 插槽上，横跨三个页签、与选中哪个菜单 / 模块无关，改完即落库； * 三者轻重不同，样式分三档（主色 / 描边 / 危险描边），不是三个同款； * 「全授权 / 全禁用」管功能权限，「清空权限」连字段权限与数据范围一起清（先过确认框）； * 后两者的整表清除按 b_user_id 成删除条件提交，不逐行枚举主键（见最后一节）； * 3. 三个页签对应三张权限表的内容面板（切换页签不销毁，用 v-show 承载）； * 左右两栏都走 Splitter 分栏（栏宽可拖拽），模块树那一栏两个页签共用； * 4. 即时落库：底部没有「保存 / 取消」按钮，任何改动都立刻按 diff 提交（见最后一节）。 * * 面板自身的规则由 user-power-panel.spec.js 覆盖，这里不重复。 */ import { describe, it, expect, beforeEach, vi } from 'vitest' import { mount, flushPromises } from '@vue/test-utils' import { nextTick } from 'vue' import UserPowerDrawer from '@/views/system/user/UserPowerDrawer.vue' import UserPowerPanel from '@/views/system/user/UserPowerPanel.vue' import UserFieldPowerPanel from '@/views/system/user/UserFieldPowerPanel.vue' import UserDataPowerPanel from '@/views/system/user/UserDataPowerPanel.vue' import { clearMessages } from '@/stores/i18n' vi.mock('@/services/api', () => ({ loadDataApi: vi.fn(), saveObjectApi: vi.fn(() => Promise.resolve({ code: 0, success: true })), })) // 提示只按"有没有给"断言（提交失败等分支的表现就是提示一句），不测具体渲染 vi.mock('@/components/ui/message/message-manager.js', () => { const m = { success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() } return { Message: m, default: m } }) import { loadDataApi, saveObjectApi } from '@/services/api' import { Message } from '@/components/ui/message/message-manager.js' /** 按表返回的行：权限点与三张授权表各留一条，三个批量按钮的效果才有可验证的落差 */ const TABLE_ROWS = { s_power: [ { b_id: 'menu.partner', b_object_type: 'menu', b_object_id: 'partner', b_xh: 10, b_canuse: 1 }, { b_id: 'module.v_b_othercompany', b_object_type: 'module', b_object_id: 'v_b_othercompany', b_xh: 10, b_canuse: 1, }, { b_id: 'action.v_b_othercompany.create', b_object_type: 'module', b_object_id: 'v_b_othercompany', b_xh: 20, b_canuse: 1, }, ], s_user_power: [{ b_user_id: '001', b_power_id: 'menu.partner', b_canuse: 1 }], s_user_field_power: [ { b_user_id: '001', b_module_id: 'v_b_othercompany', b_field_id: 'b_name', b_view: 0, b_edit: 0, b_query: 1, b_export: 1, b_canuse: 1, }, ], s_user_data_power: [ { b_user_id: '001', b_module_id: 'v_b_othercompany', b_operation: '*', b_xh: 1, b_scope_type: 'dept', b_canuse: 1, }, ], } /** s_power 全量启用编码（含 menu.*）：「全授权」要一次勾满这些 */ const ALL_POWER_IDS = TABLE_ROWS.s_power.map((row) => row.b_id) /** 页签行右端的批量按钮：0 = 全授权，1 = 全禁用，2 = 清空权限 */ function actionButton(wrapper, index) { return wrapper.findAll('.power-drawer__actions button')[index] } /** 命令式确认框（Modal.confirm 自建容器挂到 body，只能从 document 上找） */ function confirmPanel() { return [...document.querySelectorAll('.fms-modal')].find((el) => el.textContent.includes('全部权限'), ) } /** 确认框底部按钮顺序：[取消, 确定] */ function confirmFooterButtons(panel) { return [...panel.querySelectorAll('.fms-modal-footer button')] } beforeEach(() => { localStorage.clear() sessionStorage.clear() clearMessages() loadDataApi.mockReset() saveObjectApi.mockClear() // 只有本用例关心的表返回数据，其余表（菜单、模块、字段……）空数组即可 loadDataApi.mockImplementation((table) => Promise.resolve({ data: TABLE_ROWS[table] || [] })) }) async function mountDrawer() { const wrapper = mount(UserPowerDrawer, { props: { open: true, user: { b_id: '001', b_name: '张三' } }, // Drawer 用 Teleport 到 body；打桩后内容留在原地，选择器才能命中 global: { stubs: { teleport: true } }, }) await flushPromises() return wrapper } describe('分配权限抽屉：头部', () => { it('头部常规显示：账号标识标题 + 关闭按钮，页签在内容区', async () => { const wrapper = await mountDrawer() expect(wrapper.find('.fms-drawer-title').text()).toBe('分配权限 · 张三（001）') expect(wrapper.find('.fms-drawer-close').exists()).toBe(true) // header 让给账号标识：页签不在 header 里，在内容区顶部 expect(wrapper.find('.fms-drawer-header .tabs-nav').exists()).toBe(false) expect(wrapper.find('.power-drawer__nav .tabs-nav').exists()).toBe(true) // 账号级批量按钮也不占头部：它们与页签同行，在页签行右端 expect(wrapper.find('.fms-drawer-header button.button').exists()).toBe(false) }) it('账号缺名称时标题只回退到编码', async () => { const wrapper = mount(UserPowerDrawer, { props: { open: true, user: { b_id: '001' } }, global: { stubs: { teleport: true } }, }) await flushPromises() expect(wrapper.find('.fms-drawer-title').text()).toBe('分配权限 · 001') }) it('三个页签对应三张权限表的内容面板', async () => { const wrapper = await mountDrawer() expect(wrapper.findAll('.tabs-tab').map((el) => el.text())).toEqual([ '功能权限', '字段权限', '数据范围', ]) // 功能权限自带一棵菜单树，是独立面板；字段权限 / 数据范围共用一个面板容器 // （同一棵模块树 + 各自的内容区），所以 data-pane 落在内容区上 expect(wrapper.findAll('[data-pane]').map((el) => el.attributes('data-pane'))).toEqual([ 'power', 'field', 'data', ]) }) it('字段权限 / 数据范围：左模块树与右内容卡同样可拖拽调宽', async () => { const wrapper = await mountDrawer() // 模块树那一栏由抽屉渲染（两个页签共用），是内容区的直接子节点（功能权限面板自带一棵菜单树） const moduleSplitter = wrapper.find('.power-drawer__body > .fms-splitter') expect(moduleSplitter.exists()).toBe(true) expect(moduleSplitter.find('.fms-splitter-bar').exists()).toBe(true) const panels = moduleSplitter.findAll('.fms-splitter-panel') expect(panels).toHaveLength(2) expect(panels[0].find('.fms-tree-panel').exists()).toBe(true) // 两个面板叠在右栏里（v-show 只显一个）：切页签只换内容，不重挂树 expect(panels[1].findAll('[data-pane]').map((el) => el.attributes('data-pane'))).toEqual([ 'field', 'data', ]) }) }) describe('分配权限抽屉：账号级批量操作', () => { it('三个按钮在页签行右端：全授权 / 全禁用 / 清空权限', async () => { const wrapper = await mountDrawer() const actions = wrapper.find('.power-drawer__nav .power-drawer__actions') expect(actions.exists()).toBe(true) // 走 Tabs 的 rightExtra 插槽：按钮落在标签栏右端（.tabs-nav-extra），与页签同一行 expect( wrapper .find('.power-drawer__nav .tabs-nav .tabs-nav-extra .power-drawer__actions') .exists(), ).toBe(true) expect(actions.findAll('button').map((el) => el.text())).toEqual([ '全授权', '全禁用', '清空权限', ]) // 三者轻重不同，样式分三档：给（主色实心）/ 反向（描边）/ 破坏性（危险色描边） const buttonTypes = actions.findAll('button').map((el) => el.classes()) expect(buttonTypes[0]).toContain('button-primary') expect(buttonTypes[1]).toContain('button-outline') expect(buttonTypes[2]).toContain('button-danger-outline') // 作用范围写在 title 里（按钮文字只够放下动作名） expect(actions.findAll('button').map((el) => el.attributes('title'))).toEqual([ '勾满该账号的全部功能权限（菜单入口、模块与业务动作）', '取消该账号的全部功能权限（字段权限与数据范围不动）', '清空该账号的功能权限、字段权限与数据范围', ]) }) it('全授权：一次勾满 s_power 的全部权限点，与选中哪个菜单无关', async () => { const wrapper = await mountDrawer() await actionButton(wrapper, 0).trigger('click') expect(wrapper.findComponent(UserPowerPanel).props('modelValue')).toEqual(ALL_POWER_IDS) // 字段权限与数据范围不是「功能」权限，全授权不动它们 expect(wrapper.findComponent(UserFieldPowerPanel).props('modelValue')).toHaveLength(1) expect(wrapper.findComponent(UserDataPowerPanel).props('modelValue')).toHaveLength(1) }) it('全禁用：只取消功能权限，字段权限与数据范围不动', async () => { const wrapper = await mountDrawer() await actionButton(wrapper, 1).trigger('click') expect(wrapper.findComponent(UserPowerPanel).props('modelValue')).toEqual([]) expect(wrapper.findComponent(UserFieldPowerPanel).props('modelValue')).toHaveLength(1) expect(wrapper.findComponent(UserDataPowerPanel).props('modelValue')).toHaveLength(1) }) it('清空权限：确认前不动数据，确认后三类权限一起清空', async () => { const wrapper = await mountDrawer() // 三类都有数据，清空才有可验证的落差 expect(wrapper.findComponent(UserPowerPanel).props('modelValue')).toEqual(['menu.partner']) expect(wrapper.findComponent(UserFieldPowerPanel).props('modelValue')).toHaveLength(1) expect(wrapper.findComponent(UserDataPowerPanel).props('modelValue')).toHaveLength(1) await actionButton(wrapper, 2).trigger('click') // 三类一次清到底是重操作：先问一次，确认前什么都不动 const panel = confirmPanel() expect(panel).toBeTruthy() expect(panel.textContent).toContain('确定清空「张三（001）」的全部权限？') expect(wrapper.findComponent(UserPowerPanel).props('modelValue')).toEqual(['menu.partner']) confirmFooterButtons(panel).at(-1).click() await flushPromises() await nextTick() expect(wrapper.findComponent(UserPowerPanel).props('modelValue')).toEqual([]) expect(wrapper.findComponent(UserFieldPowerPanel).props('modelValue')).toEqual([]) expect(wrapper.findComponent(UserDataPowerPanel).props('modelValue')).toEqual([]) }) }) describe('分配权限抽屉：改动即时落库', () => { it('底部没有「保存 / 取消」按钮：改动不经过二次确认', async () => { const wrapper = await mountDrawer() // Drawer 只在给了 footer 插槽时才渲染底部条：没有保存流程，也没有取消按钮 expect(wrapper.find('.fms-drawer-footer').exists()).toBe(false) expect(wrapper.find('.power-footer').exists()).toBe(false) // 关闭入口只剩头部的关闭按钮 expect(wrapper.find('.fms-drawer-close').exists()).toBe(true) }) it('全授权：改完立刻提交，只提交基线上没有的权限点（插入，不删原有的）', async () => { const wrapper = await mountDrawer() saveObjectApi.mockClear() await actionButton(wrapper, 0).trigger('click') await flushPromises() await nextTick() expect(saveObjectApi).toHaveBeenCalledTimes(1) const [requests] = saveObjectApi.mock.calls[0] expect(requests.map((req) => req.table)).toEqual(['s_user_power']) expect(requests[0].key_field).toBe('b_user_id,b_power_id') // 顺序按 s_power 的加载顺序，与断言无关，排序后再比 expect(requests[0].inserts.map((row) => row.b_power_id).sort()).toEqual([ 'action.v_b_othercompany.create', 'module.v_b_othercompany', ]) // 原有的菜单入口仍在勾选集合里，不产生删除 expect(requests[0].deletes).toBeUndefined() }) it('全禁用：改完立刻提交，按账号整表撤销功能权限（不枚举主键行）', async () => { const wrapper = await mountDrawer() saveObjectApi.mockClear() await actionButton(wrapper, 1).trigger('click') await flushPromises() await nextTick() expect(saveObjectApi).toHaveBeenCalledTimes(1) const [requests] = saveObjectApi.mock.calls[0] expect(requests.map((req) => req.table)).toEqual(['s_user_power']) // 删除条件就是行里的列（b_user_id + 生效口径），不是逐行的主键值 expect(requests[0].deletes).toEqual([{ b_user_id: '001', b_canuse: 1 }]) expect(requests[0].inserts).toBeUndefined() }) it('清空权限：确认后三张表在同一个请求列表里提交', async () => { const wrapper = await mountDrawer() saveObjectApi.mockClear() await actionButton(wrapper, 2).trigger('click') confirmFooterButtons(confirmPanel()).at(-1).click() await flushPromises() await nextTick() expect(saveObjectApi).toHaveBeenCalledTimes(1) const [requests] = saveObjectApi.mock.calls[0] expect(requests.map((req) => req.table)).toEqual([ 's_user_power', 's_user_field_power', 's_user_data_power', ]) // 三类都按该账号整表清：条件相同（b_user_id + 生效口径），各自带上自己的主键列 expect(requests.map((req) => req.key_field)).toEqual([ 'b_user_id,b_power_id', 'b_user_id,b_module_id,b_field_id', 'b_user_id,b_module_id,b_operation,b_xh', ]) expect(requests.map((req) => req.deletes)).toEqual([ [{ b_user_id: '001', b_canuse: 1 }], [{ b_user_id: '001', b_canuse: 1 }], [{ b_user_id: '001', b_canuse: 1 }], ]) expect(requests.map((req) => req.inserts)).toEqual([undefined, undefined, undefined]) }) it('提交在飞时又勾回来的权限：随整表清除那一批写回，不会在库里被删掉', async () => { // 第一轮卡住不返回，制造"提交在飞"的窗口 let releaseFirst saveObjectApi.mockImplementationOnce( () => new Promise((resolve) => { releaseFirst = resolve }), ) const wrapper = await mountDrawer() saveObjectApi.mockClear() // 第一轮：全授权（这一轮快照里含原有的菜单入口勾选） await actionButton(wrapper, 0).trigger('click') await flushPromises() // 在飞期间：先全禁用（登记整表清除），紧接着又把菜单入口勾回来 await actionButton(wrapper, 1).trigger('click') await wrapper.findComponent(UserPowerPanel).vm.$emit('update:modelValue', ['menu.partner']) await flushPromises() releaseFirst({ code: 0, success: true }) await flushPromises() await nextTick() expect(saveObjectApi).toHaveBeenCalledTimes(2) const [requests] = saveObjectApi.mock.calls[1] expect(requests[0].deletes).toEqual([{ b_user_id: '001', b_canuse: 1 }]) // 这个权限点在基线里本来就有，diff 看不出变化，必须随本批写回 expect(requests[0].inserts).toEqual([ { b_user_id: '001', b_power_id: 'menu.partner', b_canuse: 1 }, ]) }) it('重复点同一个按钮不会重复提交：差异已落库，下一轮直接早退', async () => { const wrapper = await mountDrawer() saveObjectApi.mockClear() await actionButton(wrapper, 1).trigger('click') await flushPromises() await nextTick() await actionButton(wrapper, 1).trigger('click') await flushPromises() await nextTick() expect(saveObjectApi).toHaveBeenCalledTimes(1) }) it('提交失败：保留界面上的改动并提示（下一次改动连着重发）', async () => { saveObjectApi.mockRejectedValueOnce(new Error('网络异常')) const wrapper = await mountDrawer() saveObjectApi.mockClear() await actionButton(wrapper, 1).trigger('click') await flushPromises() await nextTick() // 失败不回退：面板上的勾选仍是"已清空"，提示里说明这一批没有落库 expect(wrapper.findComponent(UserPowerPanel).props('modelValue')).toEqual([]) expect(Message.error).toHaveBeenCalledWith('权限保存失败（改动未落库）：网络异常') }) })