优化

src/modules/unified-orders/components/OrderDeclarationEditorDialog.test.ts

@@ -1,6 +1,6 @@
 import ElementPlus, { ElMessage, ElMessageBox } from 'element-plus'
-import { flushPromises, mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { updatePlatformUnifiedOrderDeclaration } from '@/modules/unified-orders/api/unifiedOrders'
 import { listWarehouseLogisticsChannels } from '@/modules/ocean-bookings'
 import OrderDeclarationEditorDialog from './OrderDeclarationEditorDialog.vue'
@@ -23,13 +23,14 @@ const detail = {
   timeline: [],
 } as never
 
-function createWrapper() {
+function createWrapper(realDialogs = false) {
   return mount(OrderDeclarationEditorDialog, {
+    attachTo: realDialogs ? document.body : undefined,
     props: { modelValue: true, detail },
     global: {
       plugins: [ElementPlus],
       stubs: {
-        AppDialog: {
+        AppDialog: realDialogs ? false : {
           props: ['modelValue', 'confirmLoading', 'confirmDisabled'], emits: ['confirm', 'update:modelValue'],
           template: '<section v-if="modelValue"><slot /><button data-testid="save" :disabled="confirmDisabled" @click="$emit(\'confirm\')">保存</button></section>',
         },
@@ -40,6 +41,9 @@ function createWrapper() {
   })
 }
 
+enableAutoUnmount(afterEach)
+afterEach(() => { document.body.innerHTML = '' })
+
 describe('OrderDeclarationEditorDialog', () => {
   beforeEach(() => {
     vi.mocked(updatePlatformUnifiedOrderDeclaration).mockReset()
@@ -52,6 +56,31 @@ describe('OrderDeclarationEditorDialog', () => {
     vi.spyOn(ElMessage, 'success').mockImplementation(() => ({ close: vi.fn() }) as never)
   })
 
+  it('styles both native dialog roots and retains all cargo fields before applying a local edit', async () => {
+    createWrapper(true)
+    await flushPromises()
+    const parent = document.querySelector<HTMLElement>('.el-dialog.admin-density-dialog')!
+    expect(parent.style.getPropertyValue('--el-dialog-width')).toBe('min(1180px, calc(100vw - 36px))')
+    expect(parent.querySelector('.density-descriptions')).not.toBeNull()
+    parent.querySelector<HTMLButtonElement>('.cargo-table .density-action')!.click()
+    await flushPromises()
+    const dialogs = document.querySelectorAll<HTMLElement>('.el-dialog.admin-density-dialog')
+    expect(dialogs).toHaveLength(2)
+    const cargo = dialogs[1]!
+    expect(cargo.style.getPropertyValue('--el-dialog-width')).toBe('min(980px, calc(100vw - 36px))')
+    expect(cargo.querySelectorAll('.cargo-editor-grid > label')).toHaveLength(22)
+    const name = cargo.querySelector<HTMLInputElement>('input[placeholder="请输入中文品名"]')!
+    expect(name.value).toBe('台灯')
+    name.value = '编辑后的台灯'
+    name.dispatchEvent(new Event('input', { bubbles: true }))
+    await flushPromises()
+    const apply = [...cargo.querySelectorAll<HTMLButtonElement>('button')].find(button => button.textContent?.trim() === '应用本项')!
+    apply.click()
+    await flushPromises()
+    expect(parent.textContent).toContain('编辑后的台灯')
+    expect(updatePlatformUnifiedOrderDeclaration).not.toHaveBeenCalled()
+  })
+
   it('loads formal warehouse channels and submits the code/name pair from one selected option', async () => {
     vi.mocked(updatePlatformUnifiedOrderDeclaration).mockResolvedValue({ version: 8 } as never)
     const wrapper = createWrapper()