feat: 重构出库单新增页面（form.vue + 库存选择 + 手动汇总组件）

nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/modules/form.vue

@@ -1,82 +1,310 @@
 <script lang="ts" setup>
 import type { WmsIostorInvApi } from '#/api/wms/iostorinv';
 
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
-import { createIostorInv, getIostorInv, updateIostorInv } from '#/api/wms/iostorinv';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+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 { useFormSchema } from '../data';
+import InventorySelect from './inventory-select.vue';
+import ManualDetail from './manual-detail.vue';
 
 const emit = defineEmits(['success']);
 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({
   commonConfig: {
-    componentProps: {
+    componentProps: { class: 'w-full' },
-      class: 'w-full',
-    },
     formItemClass: 'col-span-2',
     labelWidth: 80,
   },
   layout: 'horizontal',
-  schema: useFormSchema(),
+  schema: [
+    {
+      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,
 });
 
+// ========== 明细数据 ==========
+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({
   async onConfirm() {
-    const { valid } = await formApi.validate();
+    const masterValues = await formApi.getValues();
-    if (!valid) {
+    if (!masterValues.storId || !masterValues.billType) {
+      message.warning('请填写仓库和业务类型');
+      return;
+    }
+    if (detailList.value.length === 0) {
+      message.warning('请至少添加一条出库明细');
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data = (await formApi.getValues()) as WmsIostorInvApi.IostorInv;
     try {
-      await (formData.value?.iostorinvId ? updateIostorInv(data) : createIostorInv(data));
+      const stor = storOptions.value.find((s) => s.value === masterValues.storId);
-      // 关闭并提示
+      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();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
+    } catch (e: any) {
+      message.error(e?.message || '保存失败');
     } finally {
       modalApi.unlock();
     }
   },
   async onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      await loadStorOptions();
+      await loadBillTypeOptions();
+    }
     if (!isOpen) {
-      formData.value = undefined;
+      detailList.value = [];
-      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>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal :title="$t('ui.actionTitle.create', ['出库单'])" class="w-[1200px]">
-    <Form class="mx-4" />
+    <div 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>
 </template>

nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/modules/inventory-select.vue

@@ -0,0 +1,110 @@
+<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>