Revert "feat: 重构出库单新增页面（form.vue + 库存选择 + 手动汇总组件）"
This reverts commit ea9ae91089.
This commit is contained in:
zhouz
@@ -1,310 +1,82 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { WmsIostorInvApi } from '#/api/wms/iostorinv';
|
import type { WmsIostorInvApi } from '#/api/wms/iostorinv';
|
||||||
|
|
||||||
import { computed, ref, watch } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
|
|
||||||
import { useVbenModal } from '@vben/common-ui';
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
import { message } from 'antdv-next';
|
import { message } from 'antdv-next';
|
||||||
|
|
||||||
import { useVbenForm } from '#/adapter/form';
|
import { useVbenForm } from '#/adapter/form';
|
||||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
import { createIostorInv, getIostorInv, updateIostorInv } from '#/api/wms/iostorinv';
|
||||||
import {
|
|
||||||
type OutboundCreateReq,
|
|
||||||
type OutboundDetail,
|
|
||||||
createIostorInvWithDetails,
|
|
||||||
} from '#/api/wms/iostorinv';
|
|
||||||
import { getBsrealStorAttrSimpleList } from '#/api/wms/bsrealstorattr';
|
|
||||||
import { getSimpleDictDataList } from '#/api/system/dict/data';
|
|
||||||
import { $t } from '#/locales';
|
import { $t } from '#/locales';
|
||||||
|
|
||||||
import InventorySelect from './inventory-select.vue';
|
import { useFormSchema } from '../data';
|
||||||
import ManualDetail from './manual-detail.vue';
|
|
||||||
|
|
||||||
const emit = defineEmits(['success']);
|
const emit = defineEmits(['success']);
|
||||||
const formData = ref<WmsIostorInvApi.IostorInv>();
|
const formData = ref<WmsIostorInvApi.IostorInv>();
|
||||||
|
const getTitle = computed(() => {
|
||||||
|
return formData.value?.iostorinvId
|
||||||
|
? $t('ui.actionTitle.edit', ['出入库单主表'])
|
||||||
|
: $t('ui.actionTitle.create', ['出入库单主表']);
|
||||||
|
});
|
||||||
|
|
||||||
// ========== 仓库选项 ==========
|
|
||||||
const storOptions = ref<
|
|
||||||
{ label: string; value: string; storCode: string; storName: string }[]
|
|
||||||
>([]);
|
|
||||||
async function loadStorOptions() {
|
|
||||||
const list = await getBsrealStorAttrSimpleList();
|
|
||||||
storOptions.value = (list || []).map((item: any) => ({
|
|
||||||
label: item.storName,
|
|
||||||
value: item.storId,
|
|
||||||
storCode: item.storCode,
|
|
||||||
storName: item.storName,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
// ========== 业务类型选项 ==========
|
|
||||||
const billTypeOptions = ref<{ label: string; value: string }[]>([]);
|
|
||||||
async function loadBillTypeOptions() {
|
|
||||||
const list = await getSimpleDictDataList();
|
|
||||||
billTypeOptions.value = (list || [])
|
|
||||||
.filter((d: any) => d.dictType === 'out_bill_type')
|
|
||||||
.map((d: any) => ({ label: d.label, value: d.value }));
|
|
||||||
}
|
|
||||||
|
|
||||||
// ========== 主表表单 ==========
|
|
||||||
const [Form, formApi] = useVbenForm({
|
const [Form, formApi] = useVbenForm({
|
||||||
commonConfig: {
|
commonConfig: {
|
||||||
componentProps: { class: 'w-full' },
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
formItemClass: 'col-span-2',
|
formItemClass: 'col-span-2',
|
||||||
labelWidth: 80,
|
labelWidth: 80,
|
||||||
},
|
},
|
||||||
layout: 'horizontal',
|
layout: 'horizontal',
|
||||||
schema: [
|
schema: useFormSchema(),
|
||||||
{
|
|
||||||
fieldName: 'storId',
|
|
||||||
label: '仓库',
|
|
||||||
rules: 'required',
|
|
||||||
component: 'Select',
|
|
||||||
componentProps: {
|
|
||||||
options: storOptions,
|
|
||||||
placeholder: '请选择仓库',
|
|
||||||
fieldNames: { label: 'label', value: 'value' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fieldName: 'billType',
|
|
||||||
label: '业务类型',
|
|
||||||
rules: 'required',
|
|
||||||
component: 'Select',
|
|
||||||
componentProps: {
|
|
||||||
options: billTypeOptions,
|
|
||||||
placeholder: '请选择业务类型',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fieldName: 'billCode',
|
|
||||||
label: '单据号',
|
|
||||||
component: 'Input',
|
|
||||||
componentProps: { disabled: true, placeholder: '保存时自动生成' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fieldName: 'bizDate',
|
|
||||||
label: '业务日期',
|
|
||||||
rules: 'required',
|
|
||||||
defaultValue: new Date(),
|
|
||||||
component: 'DatePicker',
|
|
||||||
componentProps: {
|
|
||||||
showTime: true,
|
|
||||||
format: 'YYYY-MM-DD HH:mm:ss',
|
|
||||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fieldName: 'billStatus',
|
|
||||||
label: '单据状态',
|
|
||||||
component: 'Input',
|
|
||||||
componentProps: { disabled: true },
|
|
||||||
defaultValue: '生成',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fieldName: 'detailCount',
|
|
||||||
label: '明细数',
|
|
||||||
component: 'Input',
|
|
||||||
componentProps: { disabled: true },
|
|
||||||
defaultValue: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fieldName: 'totalWeight',
|
|
||||||
label: '总重量',
|
|
||||||
component: 'Input',
|
|
||||||
componentProps: { disabled: true },
|
|
||||||
defaultValue: '0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fieldName: 'remark',
|
|
||||||
label: '备注',
|
|
||||||
component: 'Input',
|
|
||||||
componentProps: { placeholder: '请输入备注' },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
showDefaultActions: false,
|
showDefaultActions: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
// ========== 明细数据 ==========
|
|
||||||
const detailList = ref<(OutboundDetail & { vehicleCode?: string; materialName?: string })[]>([]);
|
|
||||||
|
|
||||||
function updateSummary() {
|
|
||||||
const totalWeight = detailList.value
|
|
||||||
.reduce((sum, d) => sum + (Number(d.planQty) || 0), 0)
|
|
||||||
.toFixed(3);
|
|
||||||
formApi.setValues({
|
|
||||||
detailCount: detailList.value.length,
|
|
||||||
totalWeight: String(totalWeight),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 仓库切换 → 清空明细
|
|
||||||
watch(
|
|
||||||
() => formApi.getValues().storId,
|
|
||||||
() => {
|
|
||||||
detailList.value = [];
|
|
||||||
updateSummary();
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
// ========== 明细表格 ==========
|
|
||||||
const gridOptions = computed(() => ({
|
|
||||||
columns: [
|
|
||||||
{ type: 'seq', title: '序号', width: 50 },
|
|
||||||
{ field: 'vehicleCode', title: '箱号', width: 100 },
|
|
||||||
{ field: 'materialCode', title: '物料编码', width: 120 },
|
|
||||||
{ field: 'materialName', title: '物料名称', width: 150 },
|
|
||||||
{ field: 'pcsn', title: '子卷号', width: 100 },
|
|
||||||
{ field: 'planQty', title: '出库重量', width: 100 },
|
|
||||||
{ field: 'qtyUnitName', title: '单位', width: 60 },
|
|
||||||
{ field: 'remark', title: '备注', width: 120 },
|
|
||||||
{ title: '操作', width: 80, slots: { default: 'actions' } },
|
|
||||||
],
|
|
||||||
data: detailList.value,
|
|
||||||
height: 'auto',
|
|
||||||
rowConfig: { keyField: 'materialCode', isHover: true },
|
|
||||||
}));
|
|
||||||
|
|
||||||
function handleDeleteDetail(index: number) {
|
|
||||||
detailList.value.splice(index, 1);
|
|
||||||
updateSummary();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ========== 库存选择弹窗 ==========
|
|
||||||
const [InventorySelectModal, inventorySelectModalApi] = useVbenModal({
|
|
||||||
connectedComponent: InventorySelect,
|
|
||||||
destroyOnClose: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleSelectFromInventory() {
|
|
||||||
const storId = formApi.getValues().storId;
|
|
||||||
if (!storId) {
|
|
||||||
message.warning('请先选择仓库');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
inventorySelectModalApi.setData({ storId }).open();
|
|
||||||
}
|
|
||||||
|
|
||||||
function onInventorySelected(rows: any[]) {
|
|
||||||
detailList.value.push(
|
|
||||||
...rows.map((r: any) => ({
|
|
||||||
vehicleCode: r.vehicleCode,
|
|
||||||
materialCode: r.materialCode,
|
|
||||||
materialId: r.materialId,
|
|
||||||
materialName: r.materialName,
|
|
||||||
pcsn: r.pcsn,
|
|
||||||
planQty: r.planQty ?? r.availableQty,
|
|
||||||
qtyUnitId: r.qtyUnitId,
|
|
||||||
qtyUnitName: r.qtyUnitName,
|
|
||||||
sourceBillCode: r.extCode,
|
|
||||||
sourceBillType: r.extType,
|
|
||||||
sourceBilldtlId: r.extDtlCode,
|
|
||||||
})),
|
|
||||||
);
|
|
||||||
updateSummary();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ========== 手动新增弹窗 ==========
|
|
||||||
const [ManualDetailModal, manualDetailModalApi] = useVbenModal({
|
|
||||||
connectedComponent: ManualDetail,
|
|
||||||
destroyOnClose: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleManualAdd() {
|
|
||||||
manualDetailModalApi.setData({}).open();
|
|
||||||
}
|
|
||||||
|
|
||||||
function onManualAdded(detail: any) {
|
|
||||||
detailList.value.push(detail);
|
|
||||||
updateSummary();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ========== 主弹窗 ==========
|
|
||||||
const [Modal, modalApi] = useVbenModal({
|
const [Modal, modalApi] = useVbenModal({
|
||||||
async onConfirm() {
|
async onConfirm() {
|
||||||
const masterValues = await formApi.getValues();
|
const { valid } = await formApi.validate();
|
||||||
if (!masterValues.storId || !masterValues.billType) {
|
if (!valid) {
|
||||||
message.warning('请填写仓库和业务类型');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (detailList.value.length === 0) {
|
|
||||||
message.warning('请至少添加一条出库明细');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
modalApi.lock();
|
modalApi.lock();
|
||||||
|
// 提交表单
|
||||||
|
const data = (await formApi.getValues()) as WmsIostorInvApi.IostorInv;
|
||||||
try {
|
try {
|
||||||
const stor = storOptions.value.find((s) => s.value === masterValues.storId);
|
await (formData.value?.iostorinvId ? updateIostorInv(data) : createIostorInv(data));
|
||||||
const req: OutboundCreateReq = {
|
// 关闭并提示
|
||||||
billType: masterValues.billType,
|
|
||||||
storId: masterValues.storId,
|
|
||||||
storCode: stor?.storCode,
|
|
||||||
storName: stor?.storName,
|
|
||||||
bizDate: masterValues.bizDate,
|
|
||||||
remark: masterValues.remark,
|
|
||||||
details: detailList.value.map((d) => ({
|
|
||||||
materialCode: d.materialCode,
|
|
||||||
materialId: d.materialId,
|
|
||||||
pcsn: d.pcsn,
|
|
||||||
planQty: Number(d.planQty),
|
|
||||||
qtyUnitId: d.qtyUnitId,
|
|
||||||
qtyUnitName: d.qtyUnitName,
|
|
||||||
remark: d.remark,
|
|
||||||
sourceBillCode: d.sourceBillCode,
|
|
||||||
sourceBillType: d.sourceBillType,
|
|
||||||
sourceBilldtlId: d.sourceBilldtlId,
|
|
||||||
})),
|
|
||||||
};
|
|
||||||
await createIostorInvWithDetails(req);
|
|
||||||
await modalApi.close();
|
await modalApi.close();
|
||||||
emit('success');
|
emit('success');
|
||||||
message.success($t('ui.actionMessage.operationSuccess'));
|
message.success($t('ui.actionMessage.operationSuccess'));
|
||||||
} catch (e: any) {
|
|
||||||
message.error(e?.message || '保存失败');
|
|
||||||
} finally {
|
} finally {
|
||||||
modalApi.unlock();
|
modalApi.unlock();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async onOpenChange(isOpen: boolean) {
|
async onOpenChange(isOpen: boolean) {
|
||||||
if (isOpen) {
|
|
||||||
await loadStorOptions();
|
|
||||||
await loadBillTypeOptions();
|
|
||||||
}
|
|
||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
detailList.value = [];
|
formData.value = undefined;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 加载数据
|
||||||
|
const data = modalApi.getData<WmsIostorInvApi.IostorInv>();
|
||||||
|
if (!data || !data.iostorinvId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
modalApi.lock();
|
||||||
|
try {
|
||||||
|
formData.value = await getIostorInv(data.iostorinvId);
|
||||||
|
// 设置到 values
|
||||||
|
await formApi.setValues(formData.value);
|
||||||
|
} finally {
|
||||||
|
modalApi.unlock();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Modal :title="$t('ui.actionTitle.create', ['出库单'])" class="w-[1200px]">
|
<Modal :title="getTitle">
|
||||||
<div class="mx-4">
|
<Form class="mx-4" />
|
||||||
<h4 class="mb-3 text-base font-medium">基本信息</h4>
|
|
||||||
<Form />
|
|
||||||
|
|
||||||
<div class="mt-6">
|
|
||||||
<div class="mb-3 flex items-center justify-between">
|
|
||||||
<h4 class="text-base font-medium">出库明细</h4>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<a-button type="primary" @click="handleSelectFromInventory">
|
|
||||||
从库存选择
|
|
||||||
</a-button>
|
|
||||||
<a-button @click="handleManualAdd"> 手动新增汇总 </a-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<vxe-grid v-bind="gridOptions">
|
|
||||||
<template #actions="{ rowIndex }">
|
|
||||||
<a-button type="link" danger @click="handleDeleteDetail(rowIndex)">
|
|
||||||
删除
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</vxe-grid>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<InventorySelectModal @select="onInventorySelected" />
|
|
||||||
<ManualDetailModal @confirm="onManualAdded" />
|
|
||||||
</Modal>
|
</Modal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,110 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { AvailableInventory } from '#/api/wms/iostorinv';
|
|
||||||
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
import { useVbenModal } from '@vben/common-ui';
|
|
||||||
|
|
||||||
import { message } from 'antdv-next';
|
|
||||||
|
|
||||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|
||||||
import { getAvailableInventory } from '#/api/wms/iostorinv';
|
|
||||||
|
|
||||||
const emit = defineEmits(['select']);
|
|
||||||
|
|
||||||
const storId = ref('');
|
|
||||||
|
|
||||||
const [Grid, gridApi] = useVbenVxeGrid({
|
|
||||||
formOptions: {
|
|
||||||
schema: [
|
|
||||||
{
|
|
||||||
fieldName: 'materialCode',
|
|
||||||
label: '物料编码',
|
|
||||||
component: 'Input',
|
|
||||||
componentProps: { allowClear: true, placeholder: '请输入物料编码' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fieldName: 'pcsn',
|
|
||||||
label: '批次',
|
|
||||||
component: 'Input',
|
|
||||||
componentProps: { allowClear: true, placeholder: '请输入批次' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fieldName: 'vehicleCode',
|
|
||||||
label: '载具编码',
|
|
||||||
component: 'Input',
|
|
||||||
componentProps: { allowClear: true, placeholder: '请输入载具编码' },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
gridOptions: {
|
|
||||||
columns: [
|
|
||||||
{ type: 'checkbox', width: 40 },
|
|
||||||
{ field: 'vehicleCode', title: '箱号', width: 100 },
|
|
||||||
{ field: 'materialCode', title: '物料编码', width: 120 },
|
|
||||||
{ field: 'pcsn', title: '子卷号', width: 100 },
|
|
||||||
{ field: 'availableQty', title: '可用数量', width: 100 },
|
|
||||||
{ field: 'qtyUnitName', title: '单位', width: 60 },
|
|
||||||
],
|
|
||||||
height: 400,
|
|
||||||
keepSource: true,
|
|
||||||
proxyConfig: {
|
|
||||||
ajax: {
|
|
||||||
query: async (_page, formValues) => {
|
|
||||||
if (!storId.value) return { rows: [], total: 0 };
|
|
||||||
const list = await getAvailableInventory({
|
|
||||||
storId: storId.value,
|
|
||||||
materialCode: formValues.materialCode || undefined,
|
|
||||||
pcsn: formValues.pcsn || undefined,
|
|
||||||
vehicleCode: formValues.vehicleCode || undefined,
|
|
||||||
});
|
|
||||||
const rows = (list || []).map((item: AvailableInventory) => ({
|
|
||||||
...item,
|
|
||||||
planQty: item.availableQty,
|
|
||||||
}));
|
|
||||||
return { rows, total: rows.length };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
rowConfig: { keyField: 'vehicleCode', isHover: true },
|
|
||||||
} as any,
|
|
||||||
gridEvents: {
|
|
||||||
checkboxChange({ row, checked }: { row: any; checked: boolean }) {
|
|
||||||
const allRows = gridApi.getGridData() as any[];
|
|
||||||
const sameVehicleRows = allRows.filter(
|
|
||||||
(r: any) => r.vehicleCode === row.vehicleCode,
|
|
||||||
);
|
|
||||||
if (checked) {
|
|
||||||
sameVehicleRows.forEach((r: any) => gridApi.setCheckboxRow(r, true));
|
|
||||||
} else {
|
|
||||||
sameVehicleRows.forEach((r: any) => gridApi.setCheckboxRow(r, false));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const [Modal, modalApi] = useVbenModal({
|
|
||||||
async onConfirm() {
|
|
||||||
const checked = gridApi.getCheckboxRecords();
|
|
||||||
if (checked.length === 0) {
|
|
||||||
message.warning('请至少选择一条库存记录');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
emit('select', checked);
|
|
||||||
modalApi.close();
|
|
||||||
},
|
|
||||||
async onOpenChange(isOpen: boolean) {
|
|
||||||
if (isOpen) {
|
|
||||||
const data = modalApi.getData<{ storId: string }>();
|
|
||||||
storId.value = data?.storId || '';
|
|
||||||
gridApi.query();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Modal title="选择库存" class="w-[1000px]">
|
|
||||||
<Grid />
|
|
||||||
</Modal>
|
|
||||||
</template>
|
|
||||||
Reference in New Issue
Block a user