style(admin): unify dialog layouts and dense readonly presentation

src/modules/customers/components/CustomerBillingRulesPanel.test.ts

@@ -1,4 +1,4 @@
-import ElementPlus from 'element-plus'
+import ElementPlus, { ElDialog, ElMessageBox } from 'element-plus'
 import { createPinia, setActivePinia } from 'pinia'
 import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -136,13 +136,23 @@ describe('CustomerBillingRulesPanel', () => {
   })
 
   it('submits all four rows in one update request', async () => {
-    const wrapper = mount(CustomerBillingRulesPanel, { attachTo: document.body, props: { customerId: '8', customerName: '柏悦物流' }, global: { plugins: [ElementPlus] } })
+    const wrapper = mount(CustomerBillingRulesPanel, { attachTo: document.body, props: { customerId: '8', customerName: '柏悦物流', customerCode: 'C0008' }, global: { plugins: [ElementPlus] } })
     await flushPromises()
     ;[...document.querySelectorAll<HTMLButtonElement>('button')].find((button) => button.textContent?.trim() === '编辑规则')?.click()
     await flushPromises()
+    expect(wrapper.findComponent(AppDialog).props('title')).toBe('编辑箱规尺寸 / 计算规则 · C0008')
+    const length = document.querySelector<HTMLInputElement>('.editor-table input[placeholder="请输入内径长"]')!
+    length.value = '31'
+    length.dispatchEvent(new Event('input', { bubbles: true }))
+    length.dispatchEvent(new Event('change', { bubbles: true }))
+    await flushPromises()
+    document.querySelector<HTMLButtonElement>('button[aria-label="展开全屏"]')!.click()
+    await flushPromises()
+    expect(document.querySelector('.customer-density-dialog.is-fullscreen')).not.toBeNull()
+    expect(length.value).toBe('31.000')
     const saveButton = [...document.querySelectorAll<HTMLButtonElement>('button')].find((button) => button.textContent?.trim() === '保存规则')
     saveButton?.click(); await flushPromises()
-    expect(updateCustomerDimensionConfig).toHaveBeenCalledWith('8', { rules: expect.arrayContaining([expect.objectContaining({ boxType: 'SMALL', version: 3 }), expect.objectContaining({ boxType: 'EXTRA_LARGE', version: 3 })]) })
+    expect(updateCustomerDimensionConfig).toHaveBeenCalledWith('8', { rules: expect.arrayContaining([expect.objectContaining({ boxType: 'SMALL', innerLengthCm: 31, version: 3 }), expect.objectContaining({ boxType: 'EXTRA_LARGE', version: 3 })]) })
     const submittedRules = vi.mocked(updateCustomerDimensionConfig).mock.calls[0][1].rules
     expect(submittedRules).toHaveLength(4)
     expect(Object.keys(submittedRules[0]).sort()).toEqual([
@@ -190,4 +200,43 @@ describe('CustomerBillingRulesPanel', () => {
     await flushPromises()
     expect(updateCustomerDimensionDefaultCalculationMode).toHaveBeenCalledWith('8', 'MULTIPLY')
   })
+  it('keeps dimension changes when header abandonment is declined', async () => {
+    const wrapper = mount(CustomerBillingRulesPanel, { attachTo: document.body, props: { customerId: '8', customerName: '柏悦物流', customerCode: 'C0008' }, global: { plugins: [ElementPlus] } })
+    await flushPromises()
+    ;[...document.querySelectorAll<HTMLButtonElement>('button')].find(button => button.textContent?.trim() === '编辑规则')!.click()
+    await flushPromises()
+    const input = document.querySelector<HTMLInputElement>('.editor-table input[placeholder="请输入内径长"]')!
+    input.value = '32'
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    input.dispatchEvent(new Event('change', { bubbles: true }))
+    await flushPromises()
+    const confirmation = vi.spyOn(ElMessageBox, 'confirm').mockRejectedValueOnce('cancel')
+    document.querySelector<HTMLButtonElement>('.customer-density-dialog .el-dialog__headerbtn')!.click()
+    await flushPromises()
+    expect(confirmation).toHaveBeenCalledWith(expect.stringContaining('尚未保存'), '放弃编辑 · C0008', expect.objectContaining({ customClass: 'admin-density-confirm' }))
+    expect(wrapper.findComponent(AppDialog).props('modelValue')).toBe(true)
+    expect(input.value).toBe('32.000')
+    confirmation.mockRestore()
+  })
+
+  it('locks header and footer closing while coefficient rules are saving', async () => {
+    let finish!: (rule: CustomerChargeRule) => void
+    vi.mocked(createCustomerChargeRule).mockReturnValueOnce(new Promise(resolve => { finish = resolve }))
+    const wrapper = mount(CustomerBillingRulesPanel, { attachTo: document.body, props: { customerId: '8', customerName: '柏悦物流' }, global: { plugins: [ElementPlus] } })
+    await flushPromises()
+    ;[...document.querySelectorAll<HTMLButtonElement>('button')].find(button => button.textContent?.trim() === '编辑规则')!.click()
+    await flushPromises()
+    ;[...document.querySelectorAll<HTMLButtonElement>('button')].find(button => button.textContent?.trim() === '保存系数规则')!.click()
+    await flushPromises()
+    expect(wrapper.findComponent(AppDialog).props('confirmLoading')).toBe(true)
+    expect(wrapper.findComponent(ElDialog).props('showClose')).toBe(false)
+    expect(wrapper.findComponent(ElDialog).props('closeOnPressEscape')).toBe(false)
+    const done = vi.fn()
+    await wrapper.findComponent(AppDialog).props('beforeClose')!(done)
+    expect(done).not.toHaveBeenCalled()
+    finish(chargeRule)
+    await flushPromises()
+    expect(wrapper.findComponent(AppDialog).props('modelValue')).toBe(false)
+  })
+
 })