feat:【antd】【erp 系统】stock/move 1/1 重构完成

This commit is contained in:
YunaiV
2025-10-05 08:52:58 +08:00
parent 33de8dcdf2
commit 9567fb39c1
6 changed files with 513 additions and 629 deletions

View File

@@ -2,8 +2,10 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ErpStockMoveApi } from '#/api/erp/stock/move';
import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart } from '@vben/utils';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { message } from 'ant-design-vue';
@@ -17,71 +19,84 @@ import {
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import StockInForm from './modules/form.vue';
import Form from './modules/form.vue';
/** 库存调拨单管理 */
/** ERP 库存调拨单列表 */
defineOptions({ name: 'ErpStockMove' });
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: StockInForm,
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 导出库存调拨单 */
/** 导出表格 */
async function handleExport() {
const data = await exportStockMove(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '库存调拨单.xls', source: data });
}
/** 新增/编辑/详情 */
function openForm(type: string, id?: number) {
formModalApi.setData({ type, id }).open();
/** 新增库存调拨单 */
function handleCreate() {
formModalApi.setData({ type: 'create' }).open();
}
/** 删除 */
async function handleDelete(ids: any[]) {
/** 编辑库存调拨单 */
function handleEdit(row: ErpStockMoveApi.StockMove) {
formModalApi.setData({ type: 'edit', id: row.id }).open();
}
/** 删除库存调拨单 */
async function handleDelete(ids: number[]) {
const hideLoading = message.loading({
content: '删除中...',
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteStockMove(ids);
message.success({
content: '删除成功',
key: 'action_process_msg',
});
onRefresh();
message.success($t('ui.actionMessage.deleteSuccess'));
handleRefresh();
} finally {
hideLoading();
}
}
/** 审/反审 */
async function handleUpdateStatus(id: any, status: number) {
const statusText = status === 20 ? '审核' : '反审核';
/** 审/反审批操作 */
async function handleUpdateStatus(
row: ErpStockMoveApi.StockMove,
status: number,
) {
const hideLoading = message.loading({
content: `${statusText}中...`,
content: `确定${status === 20 ? '审批' : '反审批'}该调拨单吗?`,
duration: 0,
key: 'action_process_msg',
});
try {
await updateStockMoveStatus({ id, status });
message.success({
content: `${statusText}成功`,
key: 'action_process_msg',
});
onRefresh();
await updateStockMoveStatus({ id: row.id!, status });
message.success(`${status === 20 ? '审批' : '反审批'}成功`);
handleRefresh();
} finally {
hideLoading();
}
}
const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
records,
}: {
records: ErpStockMoveApi.StockMove[];
}) {
checkedIds.value = records.map((item) => item.id!);
}
/** 查看详情 */
function handleDetail(row: ErpStockMoveApi.StockMove) {
formModalApi.setData({ type: 'detail', id: row.id }).open();
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
@@ -103,15 +118,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
checkboxConfig: {
reserve: true,
},
} as VxeTableGridOptions<ErpStockMoveApi.StockMove>,
gridEvents: {
checkboxAll: handleRowCheckboxChange,
checkboxChange: handleRowCheckboxChange,
},
});
</script>
@@ -123,97 +140,86 @@ const [Grid, gridApi] = useVbenVxeGrid({
url="https://doc.iocoder.cn/erp/stock-move-check/"
/>
</template>
<FormModal @success="handleRefresh" />
<Grid table-title="库存调拨单列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['库存调拨']),
label: $t('ui.actionTitle.create', ['库存调拨']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['erp:stock-move:create'],
onClick: () => openForm('create'),
onClick: handleCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'default',
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['erp:stock-move:export'],
onClick: handleExport,
},
{
label: '批量删除',
type: 'default',
type: 'primary',
danger: true,
disabled: isEmpty(checkedIds),
icon: ACTION_ICON.DELETE,
auth: ['erp:stock-move:delete'],
popConfirm: {
title: '是否删除所选中数据?',
confirm: () => {
const checkboxRecords = gridApi.grid.getCheckboxRecords();
if (checkboxRecords.length === 0) {
message.warning('请选择要删除的数据');
return;
}
handleDelete(checkboxRecords.map((item) => item.id));
},
title: `是否删除所选中数据?`,
confirm: handleDelete.bind(null, checkedIds),
},
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '详情',
label: $t('common.detail'),
type: 'link',
icon: ACTION_ICON.VIEW,
auth: ['erp:stock-move:query'],
onClick: () => openForm('detail', row.id),
onClick: handleDetail.bind(null, row),
},
{
label: '编辑',
auth: ['erp:stock-move:update'],
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
disabled: row.status !== 10,
onClick: () => openForm('update', row.id),
auth: ['erp:stock-move:update'],
ifShow: () => row.status !== 20,
onClick: handleEdit.bind(null, row),
},
{
label: '审核',
auth: ['erp:stock-move:update'],
ifShow: row.status === 10,
label: row.status === 10 ? '审批' : '反审批',
type: 'link',
auth: ['erp:stock-move:update-status'],
popConfirm: {
title: '确认要审核该调度单吗?',
confirm: () => handleUpdateStatus(row.id, 20),
title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗?`,
confirm: handleUpdateStatus.bind(
null,
row,
row.status === 10 ? 20 : 10,
),
},
},
{
label: '反审核',
danger: true,
auth: ['erp:stock-move:update'],
ifShow: row.status === 20,
popConfirm: {
title: '确认要反审核该调度单吗?',
confirm: () => handleUpdateStatus(row.id, 10),
},
},
{
label: '删除',
label: $t('common.delete'),
type: 'link',
danger: true,
color: 'error',
auth: ['erp:stock-move:delete'],
disabled: row.status !== 10,
popConfirm: {
title: '确认要删除该调度单吗?',
confirm: () => handleDelete([row.id]),
title: $t('ui.actionMessage.deleteConfirm', [row.no]),
confirm: handleDelete.bind(null, [row.id!]),
},
},
]"
/>
</template>
</Grid>
<!-- 表单弹窗 -->
<FormModal @success="onRefresh" />
</Page>
</template>