<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>
|
