style(admin): unify dialog layouts and dense readonly presentation
This commit is contained in:
@@ -325,6 +325,7 @@ describe('LocationsView', () => {
|
||||
|
||||
expect(getPlatformLocation).toHaveBeenCalledWith(warehouseId, availableLocation.id)
|
||||
expect(document.body.textContent).toContain('编辑库位')
|
||||
expect(document.body.querySelector('.location-editor-dialog .el-dialog__title')?.textContent).toBe(`编辑库位 · ${availableLocation.locationCode}`)
|
||||
expect(document.body.textContent).toContain('A1 区 01 位')
|
||||
expect(document.body.textContent).not.toContain('所属企业')
|
||||
expect(document.body.textContent).not.toContain('企业 ID')
|
||||
|
||||
@@ -599,7 +599,7 @@ onMounted(() => {
|
||||
|
||||
<AppDialog
|
||||
v-model="editorOpen"
|
||||
:title="editorTitle"
|
||||
:title="editorMode === 'edit' && form.locationCode ? `${editorTitle} · ${form.locationCode}` : editorTitle"
|
||||
width="min(560px, calc(100vw - 28px))"
|
||||
class="location-editor-dialog admin-density-dialog"
|
||||
:confirm-loading="saving"
|
||||
@@ -609,7 +609,7 @@ onMounted(() => {
|
||||
:show-confirm="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="editor-form" :disabled="saving">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="editor-form density-form density-form--flush-end" :disabled="saving">
|
||||
<div class="editor-field-grid">
|
||||
<el-form-item label="所属仓库" prop="warehouseId" required>
|
||||
<el-select v-model="form.warehouseId" filterable placeholder="请选择国内仓" :loading="warehouseLoading" :disabled="editorMode === 'edit'">
|
||||
@@ -686,11 +686,7 @@ onMounted(() => {
|
||||
.location-cell small, .stacked-value small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
||||
.remark-cell { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
||||
.editor-form { padding: 0; }
|
||||
.editor-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
|
||||
.editor-form :deep(.el-input-number), .editor-form :deep(.el-select) { width: 100%; }
|
||||
.editor-form :deep(.el-form-item) { margin-bottom: 14px; }
|
||||
.editor-form :deep(.el-form-item__label) { padding-bottom: var(--admin-space-1, 4px); color: #344054; font-size: var(--admin-font-caption, 12px); font-weight: 650; line-height: 1.4; }
|
||||
.editor-remark-field { margin-bottom: 0 !important; }
|
||||
.editor-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-5, 12px); }
|
||||
.editor-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-3, 8px); }
|
||||
.editor-footer > span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
||||
.editor-footer > span i { color: var(--el-color-danger); font-style: normal; }
|
||||
|
||||
@@ -130,7 +130,7 @@ describe('PalletsView', () => {
|
||||
})
|
||||
it('uses the prototype-sized centered editor without an extra detail drawer', () => {
|
||||
expect(palletsSource).not.toContain('<AppDrawer')
|
||||
expect(palletsSource).toContain('<AppDialog v-model="editorOpen" :title="editorTitle" width="min(560px, calc(100vw - 28px))"')
|
||||
expect(palletsSource).toContain('width="min(560px, calc(100vw - 28px))" class="pallet-editor-dialog admin-density-dialog"')
|
||||
expect(palletsSource).not.toContain('<el-drawer v-model="editorOpen"')
|
||||
expect(densitySource).toContain('.admin-density-dialog.el-dialog .el-dialog__body { min-height: 0; overflow-y: auto;')
|
||||
expect(palletsSource).toContain('.editor-field-grid { grid-template-columns: minmax(0, 1fr); }')
|
||||
@@ -379,5 +379,6 @@ describe('PalletsView', () => {
|
||||
await flushPromises()
|
||||
|
||||
expect(vm.form).toMatchObject({ palletCode: 'TP-002', color: '蓝色' })
|
||||
expect(document.body.querySelector('.pallet-editor-dialog .el-dialog__title')?.textContent).toBe('编辑托盘 · TP-002')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -424,8 +424,8 @@ onMounted(() => {
|
||||
</DataTable></section>
|
||||
</ListPageLayout>
|
||||
|
||||
<AppDialog v-model="editorOpen" :title="editorTitle" width="min(560px, calc(100vw - 28px))" class="pallet-editor-dialog admin-density-dialog" :close-on-click-modal="false" :confirm-loading="saving" :show-confirm="false" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="editor-form">
|
||||
<AppDialog v-model="editorOpen" :title="form.id && form.palletCode ? `${editorTitle} · ${form.palletCode}` : editorTitle" width="min(560px, calc(100vw - 28px))" class="pallet-editor-dialog admin-density-dialog" :close-on-click-modal="false" :confirm-loading="saving" :show-confirm="false" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="editor-form density-form density-form--flush-end">
|
||||
<div class="editor-field-grid">
|
||||
<el-form-item label="所属仓库" prop="warehouseId" required>
|
||||
<el-select v-model="form.warehouseId" filterable placeholder="请选择国内仓" :loading="warehouseLoading">
|
||||
@@ -494,15 +494,11 @@ onMounted(() => {
|
||||
.pallet-cell > span { width: 20px; height: 20px; }
|
||||
.remark-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.55; }
|
||||
.editor-form { padding: 0; }
|
||||
.editor-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
|
||||
.editor-form :deep(.el-input-number), .editor-form :deep(.el-select) { width: 100%; }
|
||||
.editor-form :deep(.el-form-item) { margin-bottom: 14px; }
|
||||
.editor-form :deep(.el-form-item__label) { padding-bottom: var(--admin-space-1, 4px); color: #344054; font-size: var(--admin-font-caption, 12px); font-weight: 650; line-height: 1.4; }
|
||||
.editor-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-5, 12px); }
|
||||
@media (max-width: 720px) {
|
||||
.summary-grid { grid-template-columns:1fr; }
|
||||
.editor-field-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
}
|
||||
.editor-remark-field { margin-bottom: 0 !important; }
|
||||
.field-help { margin: var(--admin-space-2, 6px) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); line-height: 1.5; }
|
||||
.drawer-footer { display: flex; justify-content: flex-end; gap: var(--admin-space-3, 8px); }
|
||||
.drawer-footer :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
|
||||
Reference in New Issue
Block a user