feat(@vben/web-antd): erp-stock-in 优化入库单产品清单组件
- 移除了 totalCount 和 totalPrice 的计算逻辑 - 调整了添加产品的按钮位置 - 为表格底部的单元格添加了自定义样式 - 简化了组件的 props 接口pull/188/head
parent
3afd957713
commit
1433a0980d
|
|
@ -1,8 +1,6 @@
|
||||||
import type { VbenFormSchema } from '#/adapter/form';
|
import type { VbenFormSchema } from '#/adapter/form';
|
||||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
import { erpPriceInputFormatter } from '@vben/utils';
|
|
||||||
|
|
||||||
import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
|
import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
|
||||||
import { getSimpleUserList } from '#/api/system/user';
|
import { getSimpleUserList } from '#/api/system/user';
|
||||||
import { DICT_TYPE, getDictOptions } from '#/utils';
|
import { DICT_TYPE, getDictOptions } from '#/utils';
|
||||||
|
|
@ -96,29 +94,6 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
formItemClass: 'col-span-3',
|
formItemClass: 'col-span-3',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
component: 'InputNumber',
|
|
||||||
componentProps: {
|
|
||||||
placeholder: '合计数量',
|
|
||||||
precision: 2,
|
|
||||||
disabled: true,
|
|
||||||
style: { width: '100%' },
|
|
||||||
},
|
|
||||||
fieldName: 'totalCount',
|
|
||||||
label: '合计数量',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'InputNumber',
|
|
||||||
componentProps: {
|
|
||||||
placeholder: '合计金额',
|
|
||||||
precision: 2,
|
|
||||||
formatter: erpPriceInputFormatter,
|
|
||||||
disabled: true,
|
|
||||||
style: { width: '100%' },
|
|
||||||
},
|
|
||||||
fieldName: 'totalPrice',
|
|
||||||
label: '合计金额',
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -296,28 +271,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||||
title: '创建人',
|
title: '创建人',
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
field: 'totalCount',
|
|
||||||
title: '数量',
|
|
||||||
minWidth: 100,
|
|
||||||
cellRender: {
|
|
||||||
name: 'CellAmount',
|
|
||||||
props: {
|
|
||||||
digits: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'totalPrice',
|
|
||||||
title: '金额',
|
|
||||||
minWidth: 120,
|
|
||||||
cellRender: {
|
|
||||||
name: 'CellAmount',
|
|
||||||
props: {
|
|
||||||
digits: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
field: 'status',
|
field: 'status',
|
||||||
title: '状态',
|
title: '状态',
|
||||||
|
|
|
||||||
|
|
@ -19,11 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||||
disabled: false,
|
disabled: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits([
|
const emit = defineEmits(['update:items']);
|
||||||
'update:items',
|
|
||||||
'update:total-count',
|
|
||||||
'update:total-price',
|
|
||||||
]);
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
items?: ErpStockInApi.StockInItem[];
|
items?: ErpStockInApi.StockInItem[];
|
||||||
|
|
@ -58,6 +54,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||||
enabled: false,
|
enabled: false,
|
||||||
},
|
},
|
||||||
showFooter: true,
|
showFooter: true,
|
||||||
|
footerCellClassName: 'stock-in-footer-cell',
|
||||||
footerMethod: ({ columns }) => {
|
footerMethod: ({ columns }) => {
|
||||||
const footers: any[][] = [];
|
const footers: any[][] = [];
|
||||||
const sums = getSummaries();
|
const sums = getSummaries();
|
||||||
|
|
@ -96,31 +93,6 @@ watch(
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
/** 计算 totalCount、totalPrice */
|
|
||||||
watch(
|
|
||||||
() => tableData.value,
|
|
||||||
() => {
|
|
||||||
if (!tableData.value || tableData.value.length === 0) {
|
|
||||||
emit('update:total-count', 0);
|
|
||||||
emit('update:total-price', 0);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const totalCount = tableData.value.reduce(
|
|
||||||
(prev, curr) => prev + (curr.count || 0),
|
|
||||||
0,
|
|
||||||
);
|
|
||||||
const totalPrice = tableData.value.reduce(
|
|
||||||
(prev, curr) => prev + (curr.totalPrice || 0),
|
|
||||||
0,
|
|
||||||
);
|
|
||||||
|
|
||||||
// 发送计算结果给父组件
|
|
||||||
emit('update:total-count', totalCount);
|
|
||||||
emit('update:total-price', totalPrice);
|
|
||||||
},
|
|
||||||
{ deep: true },
|
|
||||||
);
|
|
||||||
|
|
||||||
/** 初始化 */
|
/** 初始化 */
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
productOptions.value = await getProductSimpleList();
|
productOptions.value = await getProductSimpleList();
|
||||||
|
|
@ -260,23 +232,14 @@ function init(items: ErpStockInApi.StockInItem[]) {
|
||||||
defineExpose({
|
defineExpose({
|
||||||
validate,
|
validate,
|
||||||
init,
|
init,
|
||||||
|
handleAdd,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="mb-4 flex justify-between">
|
<div class="mb-4 flex justify-between">
|
||||||
<span class="text-lg font-medium">入库产品清单</span>
|
<span class="text-lg font-medium"></span>
|
||||||
<TableAction
|
|
||||||
v-if="!disabled"
|
|
||||||
:actions="[
|
|
||||||
{
|
|
||||||
label: '添加产品',
|
|
||||||
type: 'primary',
|
|
||||||
onClick: handleAdd,
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Grid>
|
<Grid>
|
||||||
|
|
@ -366,6 +329,26 @@ defineExpose({
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<template #bottom>
|
||||||
|
<TableAction
|
||||||
|
v-if="!disabled"
|
||||||
|
class="mt-4 flex justify-center"
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
label: '添加产品',
|
||||||
|
type: 'default',
|
||||||
|
onClick: handleAdd,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</Grid>
|
</Grid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
:deep(.vxe-table .vxe-footer--column.stock-in-footer-cell .vxe-cell) {
|
||||||
|
background-color: #f5f5f5 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -49,24 +49,6 @@ const handleUpdateItems = (items: ErpStockInApi.StockInItem[]) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleUpdateTotalCount = (totalCount: number) => {
|
|
||||||
if (formData.value) {
|
|
||||||
formData.value.totalCount = totalCount;
|
|
||||||
formApi.setValues({
|
|
||||||
totalCount: formData.value.totalCount,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUpdateTotalPrice = (totalPrice: number) => {
|
|
||||||
if (formData.value) {
|
|
||||||
formData.value.totalPrice = totalPrice;
|
|
||||||
formApi.setValues({
|
|
||||||
totalPrice: formData.value.totalPrice,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 创建或更新其它入库单
|
* 创建或更新其它入库单
|
||||||
*/
|
*/
|
||||||
|
|
@ -145,6 +127,10 @@ const [Modal, modalApi] = useVbenModal({
|
||||||
if (itemFormInstance && typeof itemFormInstance.init === 'function') {
|
if (itemFormInstance && typeof itemFormInstance.init === 'function') {
|
||||||
itemFormInstance.init([]);
|
itemFormInstance.init([]);
|
||||||
}
|
}
|
||||||
|
// 如果是新增,自动添加一行
|
||||||
|
if (formType.value === 'create' && itemFormInstance) {
|
||||||
|
itemFormInstance.handleAdd();
|
||||||
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -209,8 +195,6 @@ defineExpose({ modalApi, handleUpdateStatus });
|
||||||
:items="formData?.items ?? []"
|
:items="formData?.items ?? []"
|
||||||
:disabled="formType === 'detail'"
|
:disabled="formType === 'detail'"
|
||||||
@update:items="handleUpdateItems"
|
@update:items="handleUpdateItems"
|
||||||
@update:total-count="handleUpdateTotalCount"
|
|
||||||
@update:total-price="handleUpdateTotalPrice"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue