fix: 木箱类型

This commit is contained in:
2026-08-17 19:56:20 +08:00
parent 6e9bbce2fe
commit 18490ba4a0
17 changed files with 339 additions and 41 deletions

View File

@@ -8,6 +8,10 @@ export namespace LmsBoxTypeApi {
id?: number; // id
boxType: string; // 木箱类型
boxName?: string; // 木箱描述
boxLength?: number; // 木箱长度
boxWidth?: number; // 木箱宽度
boxHigh?: number; // 木箱高度
maxNum: number; // 最大子卷数
lashNum: string; // 捆扎模版
lashNumOne: number; // 一次捆扎次数
lashNumTwo: number; // 二次捆扎次数

View File

@@ -8,13 +8,12 @@ export namespace LmsSubPackageRelationApi {
id: number; // 子卷包装标识
packageBoxSn: string; // 木箱唯一码
qualityInBox: number; // 箱内子卷数量
extBoxSn: string; // erp木箱号
boxWeight: number; // 木箱自身重量
boxType: string; // 木箱料号
qualityGuaranPeriod: string; // 保质期
saleOrderName?: string; // 销售订单及行号
customerName?: string; // 客户编号
customerDescription?: string; // 客户名称
customerCode?: string; // 客户编号
customerName?: string; // 客户名称
productName?: string; // 产品编码
productDescription?: string; // 产品描述
dateOfFgInbound: string; // 入库日期

View File

@@ -0,0 +1,147 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { LmsBoxTypeApi } from '#/api/lms/boxtype';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { message } from 'antdv-next';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getBoxTypePage } from '#/api/lms/boxtype';
const emit = defineEmits<{
select: [rows: LmsBoxTypeApi.BoxType[]];
}>();
const selectedRows = ref<LmsBoxTypeApi.BoxType[]>([]);
const selectModalGridHeight = 600;
function handleRadioChange({ row }: { row: LmsBoxTypeApi.BoxType }) {
selectedRows.value = row ? [row] : [];
}
function handleCheckboxChange({ records }: { records: LmsBoxTypeApi.BoxType[] }) {
selectedRows.value = records;
}
const baseColumns: VxeTableGridOptions<LmsBoxTypeApi.BoxType>['columns'] = [
{ field: 'boxType', title: '木箱类型', minWidth: 120 },
{ field: 'boxName', title: '木箱描述', minWidth: 180 },
{ field: 'boxLength', title: '木箱长度', minWidth: 110 },
{ field: 'boxWidth', title: '木箱宽度', minWidth: 110 },
{ field: 'boxHigh', title: '木箱高度', minWidth: 110 },
{ field: 'maxNum', title: '最大子卷数', minWidth: 120 },
{
field: 'needLashOne',
title: '是否一次捆扎',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
{
field: 'needLashTwo',
title: '是否二次捆扎',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
];
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: [
{
fieldName: 'boxType',
label: '木箱类型',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入木箱类型',
},
},
{
fieldName: 'boxName',
label: '木箱描述',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入木箱描述',
},
},
],
},
gridOptions: {
columns: [{ type: 'radio', width: 40 }, ...baseColumns],
height: selectModalGridHeight,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getBoxTypePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<LmsBoxTypeApi.BoxType>,
gridEvents: {
radioChange: handleRadioChange,
checkboxAll: handleCheckboxChange,
checkboxChange: handleCheckboxChange,
},
});
async function clearSelectedRows() {
selectedRows.value = [];
await gridApi.grid?.clearRadioRow?.();
await gridApi.grid?.clearCheckboxRow?.();
}
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (selectedRows.value.length === 0) {
message.warning('请至少选择一条木箱类型');
return;
}
emit('select', selectedRows.value);
modalApi.close();
},
async onOpenChange(isOpen: boolean) {
await clearSelectedRows();
if (!isOpen) {
return;
}
const data = modalApi.getData<{ multiple?: boolean }>();
const multiple = data?.multiple ?? false;
gridApi.setGridOptions({
columns: [
{ type: multiple ? 'checkbox' : 'radio', width: 40 },
...baseColumns,
],
});
},
});
</script>
<template>
<Modal title="选择木箱类型" class="w-[1100px]">
<Grid />
</Modal>
</template>

View File

@@ -119,6 +119,55 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请输入木箱结构',
},
},
{
fieldName: 'boxLength',
label: '木箱长度',
rules: 'required',
component: 'InputNumber',
componentProps: {
min: 0,
placeholder: '请输入木箱长度',
precision: 0,
step: 1,
},
},
{
fieldName: 'boxWidth',
label: '木箱宽度',
rules: 'required',
component: 'InputNumber',
componentProps: {
min: 0,
placeholder: '请输入木箱宽度',
precision: 0,
step: 1,
},
},
{
fieldName: 'boxHigh',
label: '木箱高度',
rules: 'required',
component: 'InputNumber',
componentProps: {
min: 0,
placeholder: '请输入木箱高度',
precision: 0,
step: 1,
},
},
{
fieldName: 'maxNum',
label: '最大子卷数',
rules: 'required',
component: 'InputNumber',
defaultValue: 1,
componentProps: {
min: 1,
placeholder: '请输入最大子卷数',
precision: 0,
step: 1,
},
},
];
}
@@ -181,6 +230,26 @@ export function useGridColumns(): VxeTableGridOptions<LmsBoxTypeApi.BoxType>['co
title: '木箱描述',
minWidth: 120,
},
{
field: 'boxLength',
title: '木箱长度',
minWidth: 120,
},
{
field: 'boxWidth',
title: '木箱宽度',
minWidth: 120,
},
{
field: 'boxHigh',
title: '木箱高度',
minWidth: 120,
},
{
field: 'maxNum',
title: '最大子卷数',
minWidth: 120,
},
{
field: 'lashNum',
title: '捆扎模版',

View File

@@ -19,7 +19,7 @@ export function useFormSchema(): VbenFormSchema[] {
},
{
fieldName: 'packageBoxSn',
label: '木箱唯一码',
label: '木箱码',
component: 'Input',
componentProps: {
placeholder: '请输入木箱唯一码',
@@ -33,14 +33,6 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请输入箱内子卷数量',
},
},
{
fieldName: 'extBoxSn',
label: 'erp木箱号',
component: 'Input',
componentProps: {
placeholder: '请输入erp木箱号',
},
},
{
fieldName: 'boxWeight',
label: '木箱自身重量',
@@ -76,7 +68,7 @@ export function useFormSchema(): VbenFormSchema[] {
},
},
{
fieldName: 'customerName',
fieldName: 'customerCode',
label: '客户编号',
rules: 'required',
component: 'Input',
@@ -85,10 +77,13 @@ export function useFormSchema(): VbenFormSchema[] {
},
},
{
fieldName: 'customerDescription',
fieldName: 'customerName',
label: '客户名称',
rules: 'required',
component: 'RichTextarea',
component: 'Input',
componentProps: {
placeholder: '请输入客户名称',
},
},
{
fieldName: 'productName',
@@ -103,7 +98,7 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'productDescription',
label: '产品描述',
rules: 'required',
component: 'RichTextarea',
component: 'Input',
},
{
fieldName: 'dateOfFgInbound',
@@ -293,7 +288,7 @@ export function useFormSchema(): VbenFormSchema[] {
{
fieldName: 'saleOrderDescription',
label: '销售订单描述',
component: 'RichTextarea',
component: 'Input',
},
{
fieldName: 'widthStandard',
@@ -412,7 +407,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'packageBoxSn',
label: '木箱唯一码',
label: '木箱码',
component: 'Input',
componentProps: {
allowClear: true,
@@ -439,7 +434,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
},
},
{
fieldName: 'customerName',
fieldName: 'customerCode',
label: '客户编号',
component: 'Input',
componentProps: {
@@ -539,12 +534,12 @@ export function useGridColumns(): VxeTableGridOptions<LmsSubPackageRelationApi.S
minWidth: 120,
},
{
field: 'customerName',
field: 'customerCode',
title: '客户编号',
minWidth: 120,
},
{
field: 'customerDescription',
field: 'customerName',
title: '客户名称',
minWidth: 120,
},

View File

@@ -26,12 +26,13 @@ const [Form, formApi] = useVbenForm({
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
formItemClass: 'col-span-1',
labelWidth: 168,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2 gap-x-4',
});
const [Modal, modalApi] = useVbenModal({
@@ -76,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle">
<Modal :title="getTitle" class="w-1/2">
<Form class="mx-4" />
</Modal>
</template>