fix(erp): 修复单据选择弹窗宽高与嵌套关闭问题

- 调整 ERP 单据选择弹窗宽度为 80%
- 固定选择弹窗 Grid 高度,避免表格被压扁
- 禁用主表单弹窗遮罩点击关闭,避免子弹窗操作误关闭主弹窗
- 同步处理 web-antd、web-ele、web-antdv-next
pull/359/MERGE
YunaiV 2026-06-06 21:40:45 +08:00
parent da85dcf87c
commit 651a525187
42 changed files with 148 additions and 140 deletions

View File

@ -176,6 +176,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: usePurchaseInGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -95,14 +95,12 @@ defineExpose({ open: openModal });
<template>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择采购入库单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid
class="max-h-[600px]"
table-title="采购入库单列表(仅展示可付款的单据)"
/>
<Grid table-title="()" />
</Modal>
</template>

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: useSaleReturnGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -99,14 +99,12 @@ defineExpose({ open: openModal });
<template>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择采购退货单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid
class="max-h-[600px]"
table-title="采购退货单列表(仅展示需退款的单据)"
/>
<Grid table-title="退(退)" />
</Modal>
</template>

View File

@ -190,6 +190,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: useSaleOutGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -91,14 +91,12 @@ defineExpose({ open: openModal });
<template>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择销售出库单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid
class="max-h-[600px]"
table-title="销售出库单列表(仅展示可收款的单据)"
/>
<Grid table-title="()" />
</Modal>
</template>

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: useSaleReturnGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -95,14 +95,12 @@ defineExpose({ open: openModal });
<template>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择销售退货单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid
class="max-h-[600px]"
table-title="销售退货单列表(仅展示可退款的单据)"
/>
<Grid table-title="退(退)" />
</Modal>
</template>

View File

@ -206,6 +206,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -108,12 +108,13 @@ function handleOk() {
</template>
</Input>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择关联订单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid class="max-h-[600px]" table-title="(退)" />
<Grid table-title="(退)" />
</Modal>
</div>
</template>

View File

@ -206,6 +206,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -108,12 +108,13 @@ function handleOk() {
</template>
</Input>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择关联订单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid class="max-h-[600px]" table-title="(退)" />
<Grid table-title="(退)" />
</Modal>
</div>
</template>

View File

@ -201,6 +201,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -108,12 +108,13 @@ function handleOk() {
</template>
</Input>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择关联订单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid class="max-h-[600px]" table-title="()" />
<Grid table-title="()" />
</Modal>
</div>
</template>

View File

@ -206,6 +206,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -108,12 +108,13 @@ function handleOk() {
</template>
</Input>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择关联订单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid class="max-h-[600px]" table-title="(退)" />
<Grid table-title="(退)" />
</Modal>
</div>
</template>

View File

@ -176,6 +176,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: usePurchaseInGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -95,14 +95,12 @@ defineExpose({ open: openModal });
<template>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择采购入库单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid
class="max-h-[600px]"
table-title="采购入库单列表(仅展示可付款的单据)"
/>
<Grid table-title="()" />
</Modal>
</template>

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: useSaleReturnGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -99,14 +99,12 @@ defineExpose({ open: openModal });
<template>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择采购退货单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid
class="max-h-[600px]"
table-title="采购退货单列表(仅展示需退款的单据)"
/>
<Grid table-title="退(退)" />
</Modal>
</template>

View File

@ -190,6 +190,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: useSaleOutGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -91,14 +91,12 @@ defineExpose({ open: openModal });
<template>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择销售出库单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid
class="max-h-[600px]"
table-title="销售出库单列表(仅展示可收款的单据)"
/>
<Grid table-title="()" />
</Modal>
</template>

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: useSaleReturnGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -95,14 +95,12 @@ defineExpose({ open: openModal });
<template>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择销售退货单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid
class="max-h-[600px]"
table-title="销售退货单列表(仅展示可退款的单据)"
/>
<Grid table-title="退(退)" />
</Modal>
</template>

View File

@ -206,6 +206,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -108,12 +108,13 @@ function handleOk() {
</template>
</Input>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择关联订单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid class="max-h-[600px]" table-title="(退)" />
<Grid table-title="(退)" />
</Modal>
</div>
</template>

View File

@ -206,6 +206,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -108,12 +108,13 @@ function handleOk() {
</template>
</Input>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择关联订单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid class="max-h-[600px]" table-title="(退)" />
<Grid table-title="(退)" />
</Modal>
</div>
</template>

View File

@ -201,6 +201,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -108,12 +108,13 @@ function handleOk() {
</template>
</Input>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择关联订单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid class="max-h-[600px]" table-title="()" />
<Grid table-title="()" />
</Modal>
</div>
</template>

View File

@ -206,6 +206,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -108,12 +108,13 @@ function handleOk() {
</template>
</Input>
<Modal
class="!w-[50vw]"
v-model:open="open"
title="选择关联订单"
@ok="handleOk"
width="80%"
@cancel.stop="open = false"
@ok.stop="handleOk"
>
<Grid class="max-h-[600px]" table-title="(退)" />
<Grid table-title="(退)" />
</Modal>
</div>
</template>

View File

@ -176,6 +176,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: usePurchaseInGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -95,19 +95,17 @@ defineExpose({ open: openModal });
<template>
<ElDialog
class="!w-[50vw]"
v-model="open"
title="选择采购入库单"
width="80%"
@click.stop
@confirm="handleOk"
:append-to-body="true"
>
<Grid
class="max-h-[600px]"
table-title="采购入库单列表(仅展示可付款的单据)"
/>
<Grid table-title="()" />
<template #footer>
<ElButton @click="open = false">取消</ElButton>
<ElButton type="primary" @click="handleOk"></ElButton>
<ElButton @click.stop="open = false">取消</ElButton>
<ElButton type="primary" @click.stop="handleOk">确定</ElButton>
</template>
</ElDialog>
</template>

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: useSaleReturnGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -99,19 +99,17 @@ defineExpose({ open: openModal });
<template>
<ElDialog
class="!w-[50vw]"
v-model="open"
title="选择采购退货单"
width="80%"
@click.stop
@confirm="handleOk"
:append-to-body="true"
>
<Grid
class="max-h-[600px]"
table-title="采购退货单列表(仅展示需退款的单据)"
/>
<Grid table-title="退(退)" />
<template #footer>
<ElButton @click="open = false">取消</ElButton>
<ElButton type="primary" @click="handleOk"></ElButton>
<ElButton @click.stop="open = false">取消</ElButton>
<ElButton type="primary" @click.stop="handleOk">确定</ElButton>
</template>
</ElDialog>
</template>

View File

@ -190,6 +190,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: useSaleOutGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -92,18 +92,17 @@ defineExpose({ open: openModal });
<template>
<ElDialog
v-model="open"
class="!w-[50vw]"
title="选择销售出库单"
width="80%"
@click.stop
@confirm="handleOk"
:append-to-body="true"
>
<Grid
class="max-h-[600px]"
table-title="销售出库单列表(仅展示可收款的单据)"
/>
<Grid table-title="()" />
<template #footer>
<div class="dialog-footer">
<ElButton @click="open = false">取消</ElButton>
<ElButton type="primary" @click="handleOk"></ElButton>
<ElButton @click.stop="open = false">取消</ElButton>
<ElButton type="primary" @click.stop="handleOk"></ElButton>
</div>
</template>
</ElDialog>

View File

@ -26,7 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
gridOptions: {
columns: useSaleReturnGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -96,18 +96,17 @@ defineExpose({ open: openModal });
<template>
<ElDialog
v-model="open"
class="!w-[50vw]"
title="选择销售退货单"
width="80%"
@click.stop
@confirm="handleOk"
:append-to-body="true"
>
<Grid
class="max-h-[600px]"
table-title="销售退货单列表(仅展示可退款的单据)"
/>
<Grid table-title="退(退)" />
<template #footer>
<div class="dialog-footer">
<ElButton @click="open = false">取消</ElButton>
<ElButton type="primary" @click="handleOk"></ElButton>
<ElButton @click.stop="open = false">取消</ElButton>
<ElButton type="primary" @click.stop="handleOk"></ElButton>
</div>
</template>
</ElDialog>

View File

@ -206,6 +206,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -110,14 +110,15 @@ function handleOk() {
<ElDialog
v-model="open"
title="选择关联订单"
width="50%"
width="80%"
@click.stop
@close="open = false"
:append-to-body="true"
>
<Grid class="max-h-[600px]" table-title="(退)" />
<Grid table-title="(退)" />
<template #footer>
<ElButton @click="open = false">取消</ElButton>
<ElButton type="primary" @click="handleOk"></ElButton>
<ElButton @click.stop="open = false">取消</ElButton>
<ElButton type="primary" @click.stop="handleOk"></ElButton>
</template>
</ElDialog>
</div>

View File

@ -206,6 +206,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -110,14 +110,15 @@ function handleOk() {
<ElDialog
v-model="open"
title="选择关联订单"
width="50%"
width="80%"
@click.stop
@close="open = false"
:append-to-body="true"
>
<Grid class="max-h-[600px]" table-title="(退)" />
<Grid table-title="(退)" />
<template #footer>
<ElButton @click="open = false">取消</ElButton>
<ElButton type="primary" @click="handleOk"></ElButton>
<ElButton @click.stop="open = false">取消</ElButton>
<ElButton type="primary" @click.stop="handleOk"></ElButton>
</template>
</ElDialog>
</div>

View File

@ -201,6 +201,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -110,14 +110,15 @@ function handleOk() {
<ElDialog
v-model="open"
title="选择关联订单"
width="50%"
width="80%"
@click.stop
@confirm="handleOk"
:append-to-body="true"
>
<Grid class="max-h-[600px]" table-title="()" />
<Grid table-title="()" />
<template #footer>
<ElButton @click="open = false">取消</ElButton>
<ElButton type="primary" @click="handleOk"></ElButton>
<ElButton @click.stop="open = false">取消</ElButton>
<ElButton type="primary" @click.stop="handleOk"></ElButton>
</template>
</ElDialog>
</div>

View File

@ -206,6 +206,7 @@ const [Modal, modalApi] = useVbenModal({
<Modal
:title="getTitle"
class="w-3/4"
:close-on-click-modal="false"
:show-confirm-button="formType !== 'detail'"
>
<Form class="mx-3">

View File

@ -38,7 +38,7 @@ const [Grid] = useVbenVxeGrid({
},
gridOptions: {
columns: useOrderGridColumns(),
height: 'auto',
height: 520,
keepSource: true,
proxyConfig: {
ajax: {
@ -110,14 +110,15 @@ function handleOk() {
<ElDialog
v-model="open"
title="选择关联订单"
width="50%"
width="80%"
@click.stop
@confirm="handleOk"
:append-to-body="true"
>
<Grid class="max-h-[600px]" table-title="(退)" />
<Grid table-title="(退)" />
<template #footer>
<ElButton @click="open = false">取消</ElButton>
<ElButton type="primary" @click="handleOk"></ElButton>
<ElButton @click.stop="open = false">取消</ElButton>
<ElButton type="primary" @click.stop="handleOk"></ElButton>
</template>
</ElDialog>
</div>