1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
| <script lang="ts" setup>
| import type { VxeTableGridOptions } from '#/adapter/vxe-table';
| import type { ErpPurchaseStatisticsApi } from '#/api/erp/purchase/statistics';
|
| import { Page } from '@vben/common-ui';
|
| import { Tag } from 'ant-design-vue';
|
| import { useVbenVxeGrid } from '#/adapter/vxe-table';
| import { getPriceAnalysis } from '#/api/erp/purchase/statistics';
| import { getProductSimpleList } from '#/api/erp/product/product';
| import { getRangePickerDefaultProps } from '#/utils';
|
| import type { VbenFormSchema } from '#/adapter/form';
|
| defineOptions({ name: 'ErpPurchaseStatisticsPrice' });
|
| /** 搜索表单 */
| const formSchema: VbenFormSchema[] = [
| {
| fieldName: 'productId',
| label: '产品',
| component: 'ApiSelect',
| componentProps: {
| placeholder: '请选择产品',
| allowClear: true,
| showSearch: true,
| api: getProductSimpleList,
| labelField: 'name',
| valueField: 'id',
| },
| },
| {
| fieldName: 'orderTime',
| label: '采购时间',
| component: 'RangePicker',
| componentProps: {
| ...getRangePickerDefaultProps(),
| allowClear: true,
| },
| },
| ];
|
| /** 列表字段 */
| const columns: VxeTableGridOptions['columns'] = [
| {
| field: 'productName',
| title: '产品名称',
| minWidth: 150,
| },
| {
| field: 'productBarCode',
| title: '产品条码',
| minWidth: 120,
| },
| {
| field: 'avgPrice',
| title: '平均价格',
| minWidth: 120,
| formatter: 'formatAmount2',
| },
| {
| field: 'minPrice',
| title: '最低价格',
| minWidth: 120,
| formatter: 'formatAmount2',
| },
| {
| field: 'maxPrice',
| title: '最高价格',
| minWidth: 120,
| formatter: 'formatAmount2',
| },
| {
| field: 'latestPrice',
| title: '最近价格',
| minWidth: 120,
| formatter: 'formatAmount2',
| },
| {
| field: 'priceChangeRate',
| title: '价格变化率',
| minWidth: 120,
| slots: { default: 'priceChangeRate' },
| },
| ];
|
| const [Grid, gridApi] = useVbenVxeGrid({
| formOptions: {
| schema: formSchema,
| },
| gridOptions: {
| columns,
| height: 'auto',
| keepSource: true,
| proxyConfig: {
| ajax: {
| query: async ({ page }, formValues) => {
| return await getPriceAnalysis({
| pageNo: page.currentPage,
| pageSize: page.pageSize,
| ...formValues,
| });
| },
| },
| },
| rowConfig: {
| keyField: 'productId',
| isHover: true,
| },
| toolbarConfig: {
| refresh: true,
| search: true,
| },
| } as VxeTableGridOptions<ErpPurchaseStatisticsApi.PriceAnalysis>,
| });
| </script>
|
| <template>
| <Page auto-content-height>
| <Grid table-title="采购价格分析">
| <template #priceChangeRate="{ row }">
| <Tag v-if="row.priceChangeRate > 0" color="red">
| +{{ row.priceChangeRate }}%
| </Tag>
| <Tag v-else-if="row.priceChangeRate < 0" color="green">
| {{ row.priceChangeRate }}%
| </Tag>
| <Tag v-else color="default">{{ row.priceChangeRate }}%</Tag>
| </template>
| </Grid>
| </Page>
| </template>
|
|
