银川 1.仓储物流添加库存事务流水页面

gaoluyang

7 天以前 0904d14fb18944b5cc209b44e48d25c8f5aed928

银川
1.仓储物流添加库存事务流水页面

 src/api/mes/wm/transaction/index.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,52 @@
import type { PageParam, PageResult } from '@vben/request';

import { requestClient } from '#/api/request';

export namespace MesWmTransactionApi {
  /** åº“存事务流水 */
  export interface Transaction {
    id?: number;
    type?: number; // äº‹åŠ¡ç±»åž‹ï¼ˆ1-入库 2-出库）
    typeName?: string; // äº‹åŠ¡ç±»åž‹åç§°
    bizType?: number; // ä¸šåŠ¡ç±»åž‹ç¼–码
    bizTypeName?: string; // ä¸šåŠ¡ç±»åž‹åç§°
    bizCode?: string; // ä¸šåŠ¡å•å·
    itemId?: number; // ç‰©æ–™ID
    itemCode?: string; // ç‰©æ–™ç¼–码
    itemName?: string; // ç‰©æ–™åç§°
    quantity?: number; // å˜åŠ¨æ•°é‡
    batchId?: number; // æ‰¹æ¬¡ID
    batchCode?: string; // æ‰¹æ¬¡å·
    warehouseId?: number; // ä»“库ID
    warehouseName?: string; // ä»“库名称
    locationId?: number; // åº“区ID
    locationName?: string; // åº“区名称
    areaId?: number; // åº“位ID
    areaName?: string; // åº“位名称
    transactionTime?: string; // äº‹åŠ¡å‘生时间
    createTime?: string; // åˆ›å»ºæ—¶é—´
  }

  /** åˆ†é¡µæŸ¥è¯¢å‚æ•° */
  export interface PageParams extends PageParam {
    itemId?: number;
    batchCode?: string;
    warehouseId?: number;
    locationId?: number;
    areaId?: number;
    type?: number;
    bizType?: number;
    bizCode?: string;
    materialStockId?: number;
    startTime?: string;
    endTime?: string;
  }
}

/** åˆ†é¡µæŸ¥è¯¢åº“存事务流水 */
export function getTransactionPage(params: MesWmTransactionApi.PageParams) {
  return requestClient.get<PageResult<MesWmTransactionApi.Transaction>>(
    '/mes/wm/transaction/page',
    { params },
  );
}

 src/views/wls/transaction/data.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,205 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesWmTransactionApi } from '#/api/mes/wm/transaction';

import { markRaw } from 'vue';

import { MdmItemSelect } from '#/views/basicData/mdm/components';
import {
  WmWarehouseAreaSelect,
  WmWarehouseLocationSelect,
  WmWarehouseSelect,
} from '#/views/wls/warehouse/components';

/** ä¸šåŠ¡ç±»åž‹é€‰é¡¹ */
const bizTypeOptions = [
  { label: '自定义入库', value: 126 },
  { label: '自定义出库', value: 127 },
  { label: '采购入库', value: 110 },
  { label: '销售出库', value: 119 },
  { label: '调拨出库', value: 112 },
  { label: '调拨入库', value: 113 },
  { label: '其他入库', value: 115 },
  { label: '其他出库', value: 114 },
  { label: '生产领料', value: 116 },
  { label: '生产退料', value: 117 },
  { label: '生产入库', value: 118 },
  { label: '生产消耗', value: 123 },
  { label: '产品产出', value: 124 },
  { label: '供应商退货', value: 125 },
  { label: '销售退货', value: 120 },
  { label: '外协发料', value: 121 },
  { label: '外协入库', value: 122 },
];

/** åˆ—表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'itemId',
      label: '物料',
      component: markRaw(MdmItemSelect),
      componentProps: {
        placeholder: '请选择物料',
      },
    },
    {
      fieldName: 'batchCode',
      label: '批次号',
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '请输入批次号',
      },
    },
    {
      fieldName: 'warehouseId',
      label: '仓库',
      component: markRaw(WmWarehouseSelect),
      componentProps: {
        placeholder: '请选择仓库',
      },
    },
    {
      fieldName: 'locationId',
      label: '库区',
      component: markRaw(WmWarehouseLocationSelect),
      dependencies: {
        triggerFields: ['warehouseId'],
        componentProps: (values) => ({
          warehouseId: values.warehouseId,
          placeholder: '请选择库区',
        }),
        trigger: (values, formApi) => {
          if (values.locationId !== undefined) {
            void formApi.setFieldValue('locationId', undefined);
          }
        },
      },
    },
    {
      fieldName: 'areaId',
      label: '库位',
      component: markRaw(WmWarehouseAreaSelect),
      dependencies: {
        triggerFields: ['warehouseId', 'locationId'],
        componentProps: (values) => ({
          locationId: values.locationId,
          placeholder: '请选择库位',
        }),
        trigger: (values, formApi) => {
          if (values.areaId !== undefined) {
            void formApi.setFieldValue('areaId', undefined);
          }
        },
      },
    },
    {
      fieldName: 'type',
      label: '事务类型',
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          { label: '入库', value: 1 },
          { label: '出库', value: 2 },
        ],
        placeholder: '请选择事务类型',
      },
    },
    {
      fieldName: 'bizType',
      label: '业务类型',
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: bizTypeOptions,
        placeholder: '请选择业务类型',
      },
    },
    {
      fieldName: 'bizCode',
      label: '业务单号',
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '请输入业务单号',
      },
    },
    {
      fieldName: 'transactionTime',
      label: '事务时间',
      component: 'RangePicker',
      componentProps: {
        allowClear: true,
        format: 'YYYY-MM-DD HH:mm:ss',
        showTime: true,
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
    },
  ];
}

/** åˆ—表的字段 */
export function useGridColumns(): VxeTableGridOptions<MesWmTransactionApi.Transaction>['columns'] {
  return [
    {
      field: 'typeName',
      title: '事务类型',
      width: 80,
      slots: { default: 'typeName' },
    },
    {
      field: 'bizTypeName',
      title: '业务类型',
      width: 100,
    },
    {
      field: 'bizCode',
      title: '业务单号',
      minWidth: 150,
    },
    {
      field: 'itemCode',
      title: '物料编码',
      width: 120,
    },
    {
      field: 'itemName',
      title: '物料名称',
      minWidth: 150,
    },
    {
      field: 'batchCode',
      title: '批次号',
      width: 120,
    },
    {
      field: 'quantity',
      title: '数量',
      width: 100,
      slots: { default: 'quantity' },
    },
    {
      field: 'warehouseName',
      title: '仓库',
      width: 100,
    },
    {
      field: 'locationName',
      title: '库区',
      width: 100,
    },
    {
      field: 'areaName',
      title: '库位',
      width: 100,
    },
    {
      field: 'transactionTime',
      title: '事务时间',
      width: 160,
      formatter: 'formatDateTime',
    },
  ];
}

 src/views/wls/transaction/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,71 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesWmTransactionApi } from '#/api/mes/wm/transaction';

import { Page } from '@vben/common-ui';

import { Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getTransactionPage } from '#/api/mes/wm/transaction';

import { useGridColumns, useGridFormSchema } from './data';

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
    columns: useGridColumns(),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          const params: MesWmTransactionApi.PageParams = {
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          };
          if (formValues.transactionTime?.length === 2) {
            params.startTime = formValues.transactionTime[0];
            params.endTime = formValues.transactionTime[1];
          }
          delete (params as any).transactionTime;
          return await getTransactionPage(params);
        },
      },
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
      search: true,
    },
  } as VxeTableGridOptions<MesWmTransactionApi.Transaction>,
});
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="库存事务流水">
      <template #typeName="{ row }">
        <Tag :color="row.type === 1 ? 'green' : 'red'">
          {{ row.typeName || '-' }}
        </Tag>
      </template>
      <template #quantity="{ row }">
        <span
          :class="{
            'text-green-600 font-bold': (row.quantity ?? 0) > 0,
            'text-red-600 font-bold': (row.quantity ?? 0) < 0,
          }"
        >
          {{ (row.quantity ?? 0).toFixed(2) }}
        </span>
      </template>
    </Grid>
  </Page>
</template>