feat(@vben/web-antd): 新增 ERP API 接口并符合 Vben 项目标准
- 将所有 ERP API 文件从旧的 axios 配置迁移到新的 requestClient - 使用 namespace 组织接口类型定义，提高代码可维护性 - 将对象方法改为独立的导出函数，符合现代 JavaScript 最佳实践 - 为所有 API 函数添加完整的 TypeScript 类型定义 - 统一分页查询参数和状态更新参数的接口定义 - 涵盖财务、采购、销售、库存等所有 ERP 业务模块
This commit is contained in:
nehc
xingyu
29
apps/web-antd/src/views/erp/home/components/SummaryCard.vue
Normal file
29
apps/web-antd/src/views/erp/home/components/SummaryCard.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<script lang="ts" setup>
|
||||
import { VbenCountToAnimator } from '@vben/common-ui';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
value?: number;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
value: 0,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2 rounded-lg border bg-white p-6 shadow-sm">
|
||||
<div class="flex items-center justify-between text-gray-500">
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<div class="flex flex-row items-baseline justify-between">
|
||||
<VbenCountToAnimator
|
||||
:end-val="value"
|
||||
:decimals="2"
|
||||
:duration="500"
|
||||
prefix="￥"
|
||||
class="text-3xl font-semibold text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
120
apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue
Normal file
120
apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<script lang="ts" setup>
|
||||
import type { EChartsOption } from 'echarts';
|
||||
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
|
||||
import { Card } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
value?: Array<{ price: number; time: string }>;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: () => [],
|
||||
});
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
/** 折线图配置 */
|
||||
const lineChartOptions: EChartsOption = {
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
top: 80,
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
top: 50,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '金额',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {},
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
yAxisIndex: false,
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'],
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
name: props.title,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
padding: [5, 10],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(val) => {
|
||||
if (!val || val.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新图表数据
|
||||
const xAxisData = val.map((item) => item.time);
|
||||
const seriesData = val.map((item) => item.price);
|
||||
|
||||
const options = {
|
||||
...lineChartOptions,
|
||||
xAxis: {
|
||||
...lineChartOptions.xAxis,
|
||||
data: xAxisData,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
...lineChartOptions.series![0],
|
||||
data: seriesData,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
renderEcharts(options);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<template #title>
|
||||
{{ title }}
|
||||
</template>
|
||||
<!-- 折线图 -->
|
||||
<EchartsUI ref="chartRef" :height="300" />
|
||||
</Card>
|
||||
</template>
|
||||
@@ -1,7 +1,50 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ErpPurchaseStatisticsApi } from '#/api/erp/statistics/purchase';
|
||||
import type { ErpSaleStatisticsApi } from '#/api/erp/statistics/sale';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { DocAlert, Page } from '@vben/common-ui';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Col, Row, Spin } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
getPurchaseSummary,
|
||||
getPurchaseTimeSummary,
|
||||
} from '#/api/erp/statistics/purchase';
|
||||
import { getSaleSummary, getSaleTimeSummary } from '#/api/erp/statistics/sale';
|
||||
|
||||
import SummaryCard from './components/SummaryCard.vue';
|
||||
import TimeSummaryChart from './components/TimeSummaryChart.vue';
|
||||
|
||||
/** ERP首页 */
|
||||
defineOptions({ name: 'ErpHome' });
|
||||
|
||||
const loading = ref(true); // 加载中
|
||||
|
||||
/** 获得销售统计 */
|
||||
const saleSummary = ref<ErpSaleStatisticsApi.SaleSummary>(); // 销售概况统计
|
||||
const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummary[]>(); // 销售时段统计
|
||||
const getSaleStatistics = async () => {
|
||||
saleSummary.value = await getSaleSummary();
|
||||
saleTimeSummaryList.value = await getSaleTimeSummary();
|
||||
};
|
||||
|
||||
/** 获得采购统计 */
|
||||
const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummary>(); // 采购概况统计
|
||||
const purchaseTimeSummaryList =
|
||||
ref<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(); // 采购时段统计
|
||||
const getPurchaseStatistics = async () => {
|
||||
purchaseSummary.value = await getPurchaseSummary();
|
||||
purchaseTimeSummaryList.value = await getPurchaseTimeSummary();
|
||||
};
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
loading.value = true;
|
||||
await Promise.all([getSaleStatistics(), getPurchaseStatistics()]);
|
||||
loading.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -12,23 +55,64 @@ import { Button } from 'ant-design-vue';
|
||||
url="https://doc.iocoder.cn/erp/build/"
|
||||
/>
|
||||
</template>
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
|
||||
>
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/home/index.vue"
|
||||
>
|
||||
可参考
|
||||
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/home/index.vue
|
||||
代码，pull request 贡献给我们！
|
||||
</Button>
|
||||
|
||||
<Spin :spinning="loading">
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- 销售/采购的全局统计 -->
|
||||
<Row :gutter="16">
|
||||
<Col :md="6" :sm="12" :xs="24">
|
||||
<SummaryCard title="今日销售" :value="saleSummary?.todayPrice" />
|
||||
</Col>
|
||||
<Col :md="6" :sm="12" :xs="24">
|
||||
<SummaryCard
|
||||
title="昨日销售"
|
||||
:value="saleSummary?.yesterdayPrice"
|
||||
/>
|
||||
</Col>
|
||||
<Col :md="6" :sm="12" :xs="24">
|
||||
<SummaryCard
|
||||
title="今日采购"
|
||||
:value="purchaseSummary?.todayPrice"
|
||||
/>
|
||||
</Col>
|
||||
<Col :md="6" :sm="12" :xs="24">
|
||||
<SummaryCard
|
||||
title="昨日采购"
|
||||
:value="purchaseSummary?.yesterdayPrice"
|
||||
/>
|
||||
</Col>
|
||||
<Col :md="6" :sm="12" :xs="24">
|
||||
<SummaryCard title="本月销售" :value="saleSummary?.monthPrice" />
|
||||
</Col>
|
||||
<Col :md="6" :sm="12" :xs="24">
|
||||
<SummaryCard title="今年销售" :value="saleSummary?.yearPrice" />
|
||||
</Col>
|
||||
<Col :md="6" :sm="12" :xs="24">
|
||||
<SummaryCard
|
||||
title="本月采购"
|
||||
:value="purchaseSummary?.monthPrice"
|
||||
/>
|
||||
</Col>
|
||||
<Col :md="6" :sm="12" :xs="24">
|
||||
<SummaryCard title="今年采购" :value="purchaseSummary?.yearPrice" />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<!-- 销售/采购的时段统计 -->
|
||||
<Row :gutter="16">
|
||||
<!-- 销售统计 -->
|
||||
<Col :md="12" :sm="12" :xs="24">
|
||||
<TimeSummaryChart title="销售统计" :value="saleTimeSummaryList" />
|
||||
</Col>
|
||||
<!-- 采购统计 -->
|
||||
<Col :md="12" :sm="12" :xs="24">
|
||||
<TimeSummaryChart
|
||||
title="采购统计"
|
||||
:value="purchaseTimeSummaryList"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Spin>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user