fix(admin): contain relationship drawer body
This commit is contained in:
@@ -3,6 +3,7 @@ import { resolve } from 'node:path'
|
||||
import { defineComponent } from 'vue'
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import ElementPlus from 'element-plus'
|
||||
import {
|
||||
getLoadingAssociationSummary,
|
||||
getOverseasInboundCodeRelationship,
|
||||
@@ -140,11 +141,40 @@ describe('InboundCodeRelationshipDrawer contract', () => {
|
||||
})
|
||||
|
||||
it('keeps sections and status badges within the drawer at desktop and narrow widths', () => {
|
||||
expect(source).toContain('.relationship-sections{display:grid;width:100%;min-width:0')
|
||||
expect(source).toContain('class="inbound-relationship-drawer"')
|
||||
expect(source).toContain(':global(.inbound-relationship-drawer .el-drawer__body){box-sizing:border-box;min-width:0;max-width:100%;overflow-x:hidden;padding-right:calc(var(--el-drawer-padding-primary) + 8px)}')
|
||||
expect(source).toContain(':global(.inbound-relationship-drawer .app-drawer__body){box-sizing:border-box;width:auto;max-width:100%;min-width:0;overflow-x:hidden}')
|
||||
expect(source).toContain('.relationship-sections{display:grid;width:auto;max-width:100%;min-width:0;grid-template-columns:minmax(0,1fr)')
|
||||
expect(source).toContain('.relationship-section{box-sizing:border-box;width:100%;min-width:0')
|
||||
expect(source).toContain('flex-wrap:wrap')
|
||||
expect(source).toContain('.relationship-section h3{flex:1 1 auto;min-width:0')
|
||||
expect(source).toContain('.relationship-status{flex:0 0 auto;max-width:100%}')
|
||||
expect(source).toContain('.inventory-table{max-width:100%')
|
||||
expect(source).toContain('.inventory-table{width:100%;max-width:100%;min-width:0')
|
||||
})
|
||||
|
||||
it('mounts the containment class through the real AppDrawer and Element Plus drawer DOM', async () => {
|
||||
const wrapper = mount(InboundCodeRelationshipDrawer, {
|
||||
attachTo: document.body,
|
||||
props: {
|
||||
modelValue: true,
|
||||
inboundCode: 'NYEXX2608300027',
|
||||
canReadBase: true,
|
||||
canReadLoading: true,
|
||||
canReadOverseas: true,
|
||||
},
|
||||
global: { plugins: [ElementPlus] },
|
||||
})
|
||||
await flushPromises()
|
||||
|
||||
const drawer = document.querySelector('.inbound-relationship-drawer')
|
||||
const elementBody = drawer?.querySelector('.el-drawer__body')
|
||||
const appBody = drawer?.querySelector('.app-drawer__body')
|
||||
expect(drawer).not.toBeNull()
|
||||
expect(elementBody).not.toBeNull()
|
||||
expect(appBody).not.toBeNull()
|
||||
expect(appBody?.querySelectorAll('.relationship-section')).toHaveLength(3)
|
||||
expect(appBody?.querySelectorAll('.relationship-status')).toHaveLength(3)
|
||||
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -47,7 +47,7 @@ watch(() => [props.modelValue, props.inboundCode, props.canReadBase, props.canRe
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDrawer :model-value="modelValue" :title="`入仓码关联数据 · ${normalizedCode || '未提供'}`" size="min(860px, 94vw)" :loading="loading" :show-footer="false" destroy-on-close @update:model-value="close">
|
||||
<AppDrawer class="inbound-relationship-drawer" :model-value="modelValue" :title="`入仓码关联数据 · ${normalizedCode || '未提供'}`" size="min(860px, 94vw)" :loading="loading" :show-footer="false" destroy-on-close @update:model-value="close">
|
||||
<el-alert v-if="!normalizedCode" type="warning" :closable="false" show-icon title="缺少入仓码，已停止查询关联数据。" />
|
||||
<el-alert v-else-if="!canReadBase && !canReadLoading && !canReadOverseas" type="warning" :closable="false" show-icon title="当前账号无入仓关联数据查看权限。" />
|
||||
|
||||
@@ -91,5 +91,5 @@ watch(() => [props.modelValue, props.inboundCode, props.canReadBase, props.canRe
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.relationship-sections{display:grid;width:100%;min-width:0;gap:14px}.relationship-section{box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--cc-border);border-radius:10px;padding:14px;background:var(--cc-surface)}.relationship-section>header{display:flex;min-width:0;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}.relationship-section h3{flex:1 1 auto;min-width:0;margin:0;font-size:15px}.relationship-status{flex:0 0 auto;max-width:100%}.compact-facts{display:grid;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--cc-border)}.compact-facts>div{display:grid;min-width:0;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:9px 10px;background:var(--cc-surface)}.compact-facts dt{color:var(--cc-muted)}.compact-facts dd{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compact-facts small{display:block;overflow:hidden;color:var(--cc-muted);margin-top:2px;text-overflow:ellipsis;white-space:nowrap}.compact-list{display:grid;min-width:0;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:9px 10px;border-top:1px solid var(--cc-border)}.compact-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inventory-table{max-width:100%;margin-top:10px}@media(max-width:720px){.compact-facts{grid-template-columns:1fr}}
|
||||
:global(.inbound-relationship-drawer .el-drawer__body){box-sizing:border-box;min-width:0;max-width:100%;overflow-x:hidden;padding-right:calc(var(--el-drawer-padding-primary) + 8px)}:global(.inbound-relationship-drawer .app-drawer__body){box-sizing:border-box;width:auto;max-width:100%;min-width:0;overflow-x:hidden}.relationship-sections{display:grid;width:auto;max-width:100%;min-width:0;grid-template-columns:minmax(0,1fr);gap:14px}.relationship-section{box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--cc-border);border-radius:10px;padding:14px;background:var(--cc-surface)}.relationship-section>header{display:flex;min-width:0;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}.relationship-section h3{flex:1 1 auto;min-width:0;margin:0;font-size:15px}.relationship-status{flex:0 0 auto;max-width:100%}.compact-facts{display:grid;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--cc-border)}.compact-facts>div{display:grid;min-width:0;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:9px 10px;background:var(--cc-surface)}.compact-facts dt{color:var(--cc-muted)}.compact-facts dd{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compact-facts small{display:block;overflow:hidden;color:var(--cc-muted);margin-top:2px;text-overflow:ellipsis;white-space:nowrap}.compact-list{display:grid;min-width:0;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:9px 10px;border-top:1px solid var(--cc-border)}.compact-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inventory-table{width:100%;max-width:100%;min-width:0;margin-top:10px}@media(max-width:720px){.compact-facts{grid-template-columns:1fr}}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user