优化
This commit is contained in:
@@ -38,7 +38,13 @@ describe('SmartLoadingDialog', () => {
|
||||
|
||||
it('keeps the outer dialog fixed so only workbench data panes scroll', () => {
|
||||
const source = readFileSync(resolve(process.cwd(), 'src/modules/container-loading/components/SmartLoadingDialog.vue'), 'utf8')
|
||||
expect(source).toContain('fullscreenable')
|
||||
expect(source).toContain('default-fullscreen')
|
||||
expect(source).not.toContain('Maximize2')
|
||||
expect(source).not.toContain('const fullscreen')
|
||||
expect(source).toContain('.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)')
|
||||
expect(source).toContain('height: 94vh; max-height: 94vh;')
|
||||
expect(source).not.toContain('.smart-loading-dialog.app-dialog.el-dialog) { width: min(1600px, 98vw)')
|
||||
expect(source).toContain('flex: 1; padding: 0; overflow: hidden;')
|
||||
expect(source).toContain('min-height: 0; flex: 1; overflow: hidden;')
|
||||
})
|
||||
|
||||
@@ -1,15 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { Maximize2, Minimize2 } from '@lucide/vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import AppDialog from '@/shared/components/AppDialog.vue'
|
||||
import GlobalSmartLoadingView from '../pages/GlobalSmartLoadingView.vue'
|
||||
|
||||
const open = defineModel<boolean>({ default: false })
|
||||
const fullscreen = ref(true)
|
||||
|
||||
watch(open, (value) => {
|
||||
if (value) fullscreen.value = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -18,38 +11,21 @@ watch(open, (value) => {
|
||||
class="smart-loading-dialog"
|
||||
title="智能装柜"
|
||||
width="min(1600px, 98vw)"
|
||||
:fullscreen="fullscreen"
|
||||
fullscreenable
|
||||
default-fullscreen
|
||||
cancel-text="关闭"
|
||||
:show-confirm="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<template #header>
|
||||
<div class="smart-loading-dialog__header">
|
||||
<div class="smart-loading-dialog__heading">
|
||||
<span>智能装柜</span>
|
||||
</div>
|
||||
<el-tooltip :content="fullscreen ? '退出全屏' : '展开全屏'" placement="bottom">
|
||||
<el-button text :aria-label="fullscreen ? '退出全屏' : '展开全屏'" @click="fullscreen = !fullscreen">
|
||||
<Minimize2 v-if="fullscreen" :size="18" />
|
||||
<Maximize2 v-else :size="18" />
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<GlobalSmartLoadingView embedded />
|
||||
</AppDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:global(.smart-loading-dialog.app-dialog.el-dialog) { width: min(1600px, 98vw); height: 94vh; max-height: 94vh; margin-block: 3vh !important; }
|
||||
:global(.smart-loading-dialog.app-dialog.el-dialog.is-fullscreen) { width: 100%; height: 100vh; max-height: 100vh; margin: 0 !important; border-radius: 0; }
|
||||
:global(.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)) { width: min(1600px, 98vw); height: 94vh; max-height: 94vh; margin-block: 3vh !important; }
|
||||
:global(.smart-loading-dialog .el-dialog__body) { display: flex; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
|
||||
:global(.smart-loading-dialog .app-dialog__body) { display: flex; min-width: 0; min-height: 0; flex: 1; overflow: hidden; }
|
||||
.smart-loading-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; color: var(--cc-text); font-size: 18px; font-weight: 600; line-height: 24px; }
|
||||
.smart-loading-dialog__heading { display: flex; min-width: 0; align-items: center; gap: 24px; }
|
||||
.smart-loading-dialog__heading > span { flex: 0 0 auto; }
|
||||
.smart-loading-dialog__header :deep(.el-button) { flex: 0 0 auto; margin-right: 24px; color: var(--cc-muted); }
|
||||
@media (max-width: 720px) {
|
||||
:global(.smart-loading-dialog.app-dialog.el-dialog) { width: calc(100vw - 12px); height: calc(100svh - 12px); max-height: calc(100svh - 12px); margin-block: 6px !important; }
|
||||
:global(.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)) { width: calc(100vw - 12px); height: calc(100svh - 12px); max-height: calc(100svh - 12px); margin-block: 6px !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -588,6 +588,7 @@ async function mutate(
|
||||
fallback: string,
|
||||
recovery: { preserveDrafts?: Record<string, number>; preserveAssign?: boolean; pickingConflict?: boolean } = {},
|
||||
) {
|
||||
if (mutating.value) return
|
||||
mutating.value = true
|
||||
mutationError.value = null
|
||||
try {
|
||||
@@ -680,7 +681,7 @@ onMounted(() => { void load(); void loadCustomers() })
|
||||
size="small"
|
||||
type="text"
|
||||
plain
|
||||
:disabled="candidateBlocked(row as SmartLoadingCandidateRow)"
|
||||
:disabled="mutating || candidateBlocked(row as SmartLoadingCandidateRow)"
|
||||
@click="openAssign(row)"
|
||||
><Plus :size="15" />{{ row.coLoadGroupId ? '整组分配' : '加入' }}</el-button>
|
||||
</template>
|
||||
@@ -756,7 +757,7 @@ onMounted(() => { void load(); void loadCustomers() })
|
||||
<div><div class="meter-title"><span>重量</span><strong>{{ formatNumber(totalWeight, 1) }} / {{ formatNumber(weightLimit, 1) }} kg</strong></div><el-progress :percentage="Math.min(displayedWeightPercent, 100)" :status="weightPercent > 100 ? 'exception' : undefined" /></div>
|
||||
</div>
|
||||
<DataTable :data="displayedPlanItems" :columns="itemColumns" :loading="selectionLoading || mutating" stripe preference-key="global-smart-loading-items" column-settings-mode="hide" empty-text="当前柜次暂无装柜明细">
|
||||
<template #actions="{ row }"><div class="row-actions"><el-button v-if="canDelete && editable && row.canRemove" size="small" type="danger" text @click="remove(row)"><Trash2 :size="15" />删除</el-button></div></template>
|
||||
<template #actions="{ row }"><div class="row-actions"><el-button v-if="canDelete && editable && row.canRemove" size="small" type="danger" text :disabled="mutating" @click="remove(row)"><Trash2 :size="15" />删除</el-button></div></template>
|
||||
<template #customerName="{ row }"><LineClampText :content="row.customerName" /></template>
|
||||
<template #coLoadGroup="{ row }"><div v-if="row.coLoadGroup" class="candidate-group"><el-tag size="small" type="warning"><LineClampText :content="`${row.coLoadGroup.groupNo} · ${groupMemberLabel(row.coLoadGroup)}`" /></el-tag><LineClampText :content="row.memberOrderSummaries.join('；')" /><LineClampText :content="`固定 ${row.coLoadGroup.fullPackageCount} 箱 · ${row.coLoadGroup.lockedPlanId ? '已锁定' : '未锁定'}`" /></div><LineClampText v-else content="普通单票" /></template>
|
||||
<template #packageCount="{ row }"><LineClampText v-if="row.coLoadGroup" :content="`${row.packageCount} 箱（整组固定）`" /><div v-else class="package-count-editor"><el-input-number v-model="quantityDrafts[row.id]" :min="row.minPackageCount" :max="adjustmentMax(row)" :step="1" :disabled="mutating || !canAssign || !editable || !row.canAdjust" controls-position="right" @change="adjust(row)" /><LineClampText v-if="row.detailCount > 1 && editable" content="多规格，需删除后重加" /><LineClampText v-if="row.pickedPackageCount > 0" :content="`已拣 ${row.pickedPackageCount} 箱`" /></div></template>
|
||||
|
||||
@@ -9,6 +9,8 @@ const orderListSource = readFileSync(resolve(process.cwd(), 'src/modules/unified
|
||||
|
||||
describe('InboundMeasurementDialog', () => {
|
||||
it('owns the complete measurement workspace behind one centered dialog', () => {
|
||||
expect(source).toContain("import AppDialog from '@/shared/components/AppDialog.vue'")
|
||||
expect(source).toContain('<AppDialog')
|
||||
expect(source).toContain('class="inbound-measurement-workspace-dialog"')
|
||||
expect(source).toContain('width="min(1240px, calc(100vw - 32px))"')
|
||||
expect(source).toContain('height: 92vh')
|
||||
@@ -21,6 +23,12 @@ describe('InboundMeasurementDialog', () => {
|
||||
expect(source).toContain('measurementPanelRef.value?.updateActualWeights(actualGrossWeightKg, actualNetWeightKg)')
|
||||
})
|
||||
|
||||
it('offers the shared fullscreen control without forcing fullscreen on open', () => {
|
||||
expect(source).toContain('fullscreenable')
|
||||
expect(source).not.toContain('default-fullscreen')
|
||||
expect(source).not.toContain('<el-dialog')
|
||||
})
|
||||
|
||||
it('shows the inbound code once in the dialog title and not as a second body heading', () => {
|
||||
expect(source).toContain("`测量 · ${props.inboundCode?.trim() || '入仓码待补充'}`")
|
||||
expect(source).not.toContain('props.inboundCode?.trim() || props.inboundId')
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import AppDialog from '@/shared/components/AppDialog.vue'
|
||||
import InboundMeasurementPanel from './InboundMeasurementPanel.vue'
|
||||
import WeightOcrPanel from '../weight/components/WeightOcrPanel.vue'
|
||||
|
||||
@@ -59,12 +60,13 @@ function handleSubmitted() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
<AppDialog
|
||||
:model-value="modelValue"
|
||||
class="inbound-measurement-workspace-dialog"
|
||||
:title="title"
|
||||
width="min(1240px, calc(100vw - 32px))"
|
||||
top="4vh"
|
||||
fullscreenable
|
||||
destroy-on-close
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
@@ -111,7 +113,7 @@ function handleSubmitted() {
|
||||
>提交审核</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</AppDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -11,6 +11,7 @@ const ElDialogStub = defineComponent({
|
||||
showClose: Boolean,
|
||||
closeOnClickModal: Boolean,
|
||||
closeOnPressEscape: Boolean,
|
||||
fullscreen: Boolean,
|
||||
},
|
||||
template: '<section data-testid="dialog"><slot name="header" /><slot /><slot name="footer" /></section>',
|
||||
})
|
||||
@@ -65,10 +66,25 @@ describe('AppDialog', () => {
|
||||
expect(wrapper.findAll('button')).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('provides opt-in fullscreen controls without changing ordinary dialogs', async () => {
|
||||
const ordinary = mountDialog()
|
||||
expect(ordinary.getComponent(ElDialogStub).props('fullscreen')).toBe(false)
|
||||
expect(ordinary.find('button[aria-label="展开全屏"]').exists()).toBe(false)
|
||||
|
||||
const wrapper = mountDialog({ fullscreenable: true, defaultFullscreen: true })
|
||||
expect(wrapper.getComponent(ElDialogStub).props('fullscreen')).toBe(true)
|
||||
expect(wrapper.find('button[aria-label="退出全屏"]').exists()).toBe(true)
|
||||
|
||||
await wrapper.get('button[aria-label="退出全屏"]').trigger('click')
|
||||
expect(wrapper.getComponent(ElDialogStub).props('fullscreen')).toBe(false)
|
||||
expect(wrapper.find('button[aria-label="展开全屏"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('keeps the dialog chrome fixed while long content scrolls in the body', () => {
|
||||
const source = readFileSync(resolve(process.cwd(), 'src/shared/components/AppDialog.vue'), 'utf8')
|
||||
|
||||
expect(source).toContain(':global(.app-dialog.el-dialog) { display: flex;')
|
||||
expect(source).toContain('width: 100%; max-width: 100%; height: 100vh;')
|
||||
expect(source).toContain(':global(.app-dialog .el-dialog__body) { min-height: 0; overflow-y: auto;')
|
||||
expect(source).toContain('max-height: calc(100svh - 20px)')
|
||||
})
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Maximize2, Minimize2 } from '@lucide/vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
export type DialogConfirmType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
|
||||
|
||||
@@ -22,6 +23,8 @@ const props = withDefaults(defineProps<{
|
||||
closeOnPressEscape?: boolean
|
||||
destroyOnClose?: boolean
|
||||
lockWhileSubmitting?: boolean
|
||||
fullscreenable?: boolean
|
||||
defaultFullscreen?: boolean
|
||||
}>(), {
|
||||
width: 'min(560px, calc(100vw - 28px))',
|
||||
loading: false,
|
||||
@@ -38,15 +41,26 @@ const props = withDefaults(defineProps<{
|
||||
closeOnPressEscape: true,
|
||||
destroyOnClose: false,
|
||||
lockWhileSubmitting: true,
|
||||
fullscreenable: false,
|
||||
defaultFullscreen: false,
|
||||
})
|
||||
|
||||
const open = defineModel<boolean>({ default: false })
|
||||
const fullscreen = ref(props.defaultFullscreen)
|
||||
const emit = defineEmits<{
|
||||
confirm: []
|
||||
cancel: []
|
||||
}>()
|
||||
const submittingLocked = computed(() => props.lockWhileSubmitting && props.confirmLoading)
|
||||
|
||||
watch(open, (value) => {
|
||||
if (value) fullscreen.value = props.defaultFullscreen
|
||||
})
|
||||
|
||||
function toggleFullscreen() {
|
||||
fullscreen.value = !fullscreen.value
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
if (submittingLocked.value) return
|
||||
open.value = false
|
||||
@@ -65,8 +79,23 @@ function closeDialog() {
|
||||
:close-on-click-modal="closeOnClickModal && !submittingLocked"
|
||||
:close-on-press-escape="closeOnPressEscape && !submittingLocked"
|
||||
:destroy-on-close="destroyOnClose"
|
||||
:fullscreen="fullscreenable && fullscreen"
|
||||
>
|
||||
<template v-if="$slots.header" #header><slot name="header" /></template>
|
||||
<template v-if="$slots.header || fullscreenable" #header>
|
||||
<div v-if="fullscreenable" class="app-dialog__header">
|
||||
<div class="app-dialog__header-content">
|
||||
<slot v-if="$slots.header" name="header" :fullscreen="fullscreen" :toggle-fullscreen="toggleFullscreen" />
|
||||
<span v-else>{{ title }}</span>
|
||||
</div>
|
||||
<el-tooltip :content="fullscreen ? '退出全屏' : '展开全屏'" placement="bottom">
|
||||
<el-button text :aria-label="fullscreen ? '退出全屏' : '展开全屏'" @click="toggleFullscreen">
|
||||
<Minimize2 v-if="fullscreen" :size="18" />
|
||||
<Maximize2 v-else :size="18" />
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<slot v-else name="header" />
|
||||
</template>
|
||||
<div v-loading="loading" class="app-dialog__body" :aria-busy="loading || confirmLoading">
|
||||
<slot />
|
||||
</div>
|
||||
@@ -89,8 +118,12 @@ function closeDialog() {
|
||||
|
||||
<style scoped>
|
||||
:global(.app-dialog.el-dialog) { display: flex; max-height: min(90vh, 900px); flex-direction: column; overflow: hidden; }
|
||||
:global(.app-dialog.el-dialog.is-fullscreen) { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; margin: 0 !important; border-radius: 0; }
|
||||
:global(.app-dialog .el-dialog__header), :global(.app-dialog .el-dialog__footer) { flex: 0 0 auto; }
|
||||
:global(.app-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
|
||||
.app-dialog__header { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; color: var(--cc-text); font-size: 18px; font-weight: 600; line-height: 24px; }
|
||||
.app-dialog__header-content { min-width: 0; flex: 1; }
|
||||
.app-dialog__header > :deep(.el-button) { flex: 0 0 auto; margin-right: 24px; color: var(--cc-muted); }
|
||||
.app-dialog__body { min-height: 0; }
|
||||
.app-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
|
||||
.app-dialog__footer :deep(.el-button) { margin-left: 0; }
|
||||
|
||||
Reference in New Issue
Block a user