feat(delivery): 添加利润表功能和发货单预览
- 集成 Tabs 组件实现发货单和利润表的标签页切换 - 实现利润表数据计算和展示功能 - 添加 Excel 导出和预览功能 - 增加利润表图片生成和保存功能 - 更新订单接口类型定义支持利润表相关字段 - 添加 ProfitTableTemplate 模板类用于生成利润表 HTML - 实现按月查询订单数据并计算单车利润逻辑 - 优化发货单预览界面样式和交互体验 - 增加 file-excel 图标支持 Excel 文件操作 - 更新应用版本号至 v0.0.66
This commit is contained in:
shenyifei
parent
2aa7df132a
commit
b46137d0c3
@ -13,7 +13,7 @@ export default {
|
|||||||
"process.env.TARO_API_DOMAIN":
|
"process.env.TARO_API_DOMAIN":
|
||||||
process.env.TARO_ENV === "h5"
|
process.env.TARO_ENV === "h5"
|
||||||
? '"/api"'
|
? '"/api"'
|
||||||
: '"https://api.erp.qilincloud168.com"',
|
: '"http://api.erp.xunhong168.test"',
|
||||||
"process.env.TARO_POSTER_DOMAIN":
|
"process.env.TARO_POSTER_DOMAIN":
|
||||||
process.env.TARO_ENV === "h5"
|
process.env.TARO_ENV === "h5"
|
||||||
? '""'
|
? '""'
|
||||||
|
|||||||
@ -1,17 +1,77 @@
|
|||||||
import { useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Image, Text, View } from "@tarojs/components";
|
import { Image, Text, View } from "@tarojs/components";
|
||||||
import { Button } from "@nutui/nutui-react-taro";
|
import { Button, TabPane, Tabs } from "@nutui/nutui-react-taro";
|
||||||
import Taro from "@tarojs/taro";
|
import Taro from "@tarojs/taro";
|
||||||
import { Icon } from "@/components";
|
import { Icon } from "@/components";
|
||||||
|
import { business, poster } from "@/services";
|
||||||
|
import {
|
||||||
|
exportProfitTableExcel,
|
||||||
|
OrderCalculator,
|
||||||
|
ProfitTableRow,
|
||||||
|
ProfitTableTemplate,
|
||||||
|
} from "@/utils";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
interface Step3SuccessProps {
|
interface Step3SuccessProps {
|
||||||
pdfUrl: string;
|
pdfUrl: string;
|
||||||
picUrl?: string;
|
picUrl?: string;
|
||||||
|
orderVO: BusinessAPI.OrderVO;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Step3Success(props: Step3SuccessProps) {
|
export default function Step3Success(props: Step3SuccessProps) {
|
||||||
const { pdfUrl, picUrl } = props;
|
const { pdfUrl, picUrl, orderVO } = props!;
|
||||||
const [tempFilePath, setTempFilePath] = useState<string>();
|
const [tempFilePath, setTempFilePath] = useState<string>();
|
||||||
|
const [tabValue, setTabValue] = useState<string>("0"); // 默认选中发货单
|
||||||
|
const [excelTempFilePath, setExcelTempFilePath] = useState<string>();
|
||||||
|
|
||||||
|
// 利润表相关状态
|
||||||
|
const [profitPicUrl, setProfitPicUrl] = useState<string>();
|
||||||
|
|
||||||
|
// 获取当前月份
|
||||||
|
const currentMonth = dayjs(orderVO.orderVehicle.deliveryTime).format(
|
||||||
|
"YYYY-MM-01",
|
||||||
|
);
|
||||||
|
const [profitData, setProfitData] = useState<ProfitTableRow[]>([]);
|
||||||
|
|
||||||
|
const init = async (currentMonth: string) => {
|
||||||
|
// 查询本月的所有订单数据
|
||||||
|
const {
|
||||||
|
data: { data: orderVOList = [] },
|
||||||
|
} = await business.order.listOrder({
|
||||||
|
orderListQry: {
|
||||||
|
month: currentMonth,
|
||||||
|
state: "COMPLETED", // 只查询已完成的订单
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取当前车次
|
||||||
|
const currentVehicleNo = orderVO.orderVehicle.vehicleNo;
|
||||||
|
|
||||||
|
// 筛选截止到当前车次之前的数据
|
||||||
|
const profitData: ProfitTableRow[] = [];
|
||||||
|
let includeNext = true;
|
||||||
|
|
||||||
|
for (const order of orderVOList) {
|
||||||
|
// 如果还没有到达当前车次，继续
|
||||||
|
if (includeNext) {
|
||||||
|
const profitRow = calculateOrderProfit(order);
|
||||||
|
profitData.push(profitRow);
|
||||||
|
|
||||||
|
// 如果是当前车次，停止添加
|
||||||
|
if (order.orderVehicle.vehicleNo === currentVehicleNo) {
|
||||||
|
includeNext = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setProfitData(profitData);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (currentMonth) {
|
||||||
|
init(currentMonth).then();
|
||||||
|
}
|
||||||
|
}, [currentMonth]);
|
||||||
|
|
||||||
// 保存图片
|
// 保存图片
|
||||||
const handleSaveImage = async () => {
|
const handleSaveImage = async () => {
|
||||||
@ -95,10 +155,196 @@ export default function Step3Success(props: Step3SuccessProps) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 下载Excel
|
||||||
|
const handleDownloadExcel = async () => {
|
||||||
|
Taro.showToast({
|
||||||
|
title: "正在下载Excel文件",
|
||||||
|
icon: "loading",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
|
||||||
|
const profitExcelUrl = await exportProfitTableExcel(
|
||||||
|
profitData,
|
||||||
|
currentMonth,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 根据环境选择不同的导出方式
|
||||||
|
const processEnv = process.env.TARO_ENV;
|
||||||
|
|
||||||
|
if (processEnv === "h5") {
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = profitExcelUrl;
|
||||||
|
link.download = `诚信志远利润明细_${currentMonth}.xlsx`;
|
||||||
|
link.style.display = "none";
|
||||||
|
|
||||||
|
// 触发下载
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
|
||||||
|
// 清理URL对象
|
||||||
|
window.URL.revokeObjectURL(profitExcelUrl);
|
||||||
|
|
||||||
|
await Taro.showToast({
|
||||||
|
title: "导出成功",
|
||||||
|
icon: "success",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
// 下载文件
|
||||||
|
const downloadRes = await Taro.downloadFile({
|
||||||
|
url: profitExcelUrl!,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (downloadRes.tempFilePath) {
|
||||||
|
setExcelTempFilePath(downloadRes.tempFilePath);
|
||||||
|
Taro.showToast({
|
||||||
|
title: "Excel下载成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("下载Excel失败:", error);
|
||||||
|
Taro.showToast({
|
||||||
|
title: "下载Excel失败",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查看Excel文档
|
||||||
|
const handleViewExcel = async () => {
|
||||||
|
if (!excelTempFilePath) {
|
||||||
|
await handleDownloadExcel();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (excelTempFilePath) {
|
||||||
|
Taro.openDocument({
|
||||||
|
filePath: excelTempFilePath,
|
||||||
|
showMenu: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 保存利润表图片
|
||||||
|
const handleSaveProfitImage = async () => {
|
||||||
|
if (!profitPicUrl) {
|
||||||
|
Taro.showToast({
|
||||||
|
title: "没有可保存的利润表图片",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 下载文件
|
||||||
|
const downloadRes = await Taro.downloadFile({
|
||||||
|
url: profitPicUrl!,
|
||||||
|
});
|
||||||
|
// 保存图片到相册
|
||||||
|
await Taro.saveImageToPhotosAlbum({
|
||||||
|
filePath: downloadRes.tempFilePath,
|
||||||
|
});
|
||||||
|
|
||||||
|
Taro.showToast({
|
||||||
|
title: "图片已保存到相册",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("保存图片失败:", error);
|
||||||
|
Taro.showToast({
|
||||||
|
title: "保存图片失败，请检查相册权限",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 计算单车的利润数据
|
||||||
|
const calculateOrderProfit = (order: BusinessAPI.OrderVO): ProfitTableRow => {
|
||||||
|
// 车次
|
||||||
|
const vehicleNo = `第${order.orderVehicle.vehicleNo || ""}车`;
|
||||||
|
|
||||||
|
// 发货日期 - 从 orderShipList 获取
|
||||||
|
const shippingDate = dayjs(order.orderVehicle.deliveryTime).format(
|
||||||
|
"YYYY/MM/DD",
|
||||||
|
);
|
||||||
|
|
||||||
|
const orderCalculator = new OrderCalculator(order);
|
||||||
|
// 计算产地成本
|
||||||
|
const originCost = orderCalculator
|
||||||
|
.getCostCalculator()
|
||||||
|
.calculateMelonPurchaseCost();
|
||||||
|
// 报价金额
|
||||||
|
const quoteAmount = orderCalculator.getSalesAmount();
|
||||||
|
// 计算利润
|
||||||
|
const profit = orderCalculator.getPersonalProfit();
|
||||||
|
|
||||||
|
return {
|
||||||
|
vehicleNo,
|
||||||
|
shippingDate,
|
||||||
|
originCost,
|
||||||
|
quoteAmount,
|
||||||
|
profit,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成利润表
|
||||||
|
const generateProfitTable = async () => {
|
||||||
|
try {
|
||||||
|
if (!profitData || profitData.length === 0) {
|
||||||
|
Taro.showToast({
|
||||||
|
title: "本月暂无订单数据",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成预览图片
|
||||||
|
const template = new ProfitTableTemplate(profitData, currentMonth);
|
||||||
|
const {
|
||||||
|
data: { data: picData },
|
||||||
|
} = await poster.poster.postApiV1Poster({
|
||||||
|
html: template.generateHtmlString(),
|
||||||
|
//@ts-ignore
|
||||||
|
format: "a4",
|
||||||
|
});
|
||||||
|
|
||||||
|
setProfitPicUrl(picData?.path);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("生成利润表失败:", error);
|
||||||
|
Taro.showToast({
|
||||||
|
title: "生成利润表失败",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="flex flex-1 flex-col overflow-hidden rounded-md bg-gray-100 shadow-md">
|
<View className="flex flex-1 flex-col overflow-hidden rounded-md bg-gray-100 shadow-md">
|
||||||
|
{/* Tab 切换 */}
|
||||||
|
<View className="bg-white px-2.5 pt-2.5">
|
||||||
|
<Tabs
|
||||||
|
style={{
|
||||||
|
// @ts-ignore
|
||||||
|
"--nutui-tabs-tabpane-padding": 0,
|
||||||
|
}}
|
||||||
|
value={tabValue}
|
||||||
|
onChange={async (value) => {
|
||||||
|
if (value === 1 && !profitPicUrl) {
|
||||||
|
await generateProfitTable();
|
||||||
|
}
|
||||||
|
setTabValue(value.toString());
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TabPane title="发货单" value={0}>
|
||||||
{/* 预览区域 */}
|
{/* 预览区域 */}
|
||||||
<View className="flex-1 p-2.5">
|
<View className="p-2.5">
|
||||||
<View className="rounded-lg bg-white shadow-sm">
|
<View className="rounded-lg bg-white shadow-sm">
|
||||||
{picUrl ? (
|
{picUrl ? (
|
||||||
<View
|
<View
|
||||||
@ -161,6 +407,7 @@ export default function Step3Success(props: Step3SuccessProps) {
|
|||||||
<Button
|
<Button
|
||||||
icon={<Icon name="eye" size={16} />}
|
icon={<Icon name="eye" size={16} />}
|
||||||
type="primary"
|
type="primary"
|
||||||
|
color="orange"
|
||||||
fill={"outline"}
|
fill={"outline"}
|
||||||
size={"large"}
|
size={"large"}
|
||||||
block
|
block
|
||||||
@ -180,6 +427,100 @@ export default function Step3Success(props: Step3SuccessProps) {
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
</TabPane>
|
||||||
|
|
||||||
|
{orderVO.orderDealer.shareAdjusted && (
|
||||||
|
<TabPane title="利润表" value={1}>
|
||||||
|
{/* 预览区域 */}
|
||||||
|
<View className="p-2.5">
|
||||||
|
<View className="rounded-lg bg-white shadow-sm">
|
||||||
|
{profitPicUrl ? (
|
||||||
|
<View
|
||||||
|
className="overflow-hidden rounded-lg border border-gray-200"
|
||||||
|
style={{ maxHeight: Taro.pxTransform(400) }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={profitPicUrl}
|
||||||
|
mode="widthFix"
|
||||||
|
className="w-full"
|
||||||
|
onClick={() => {
|
||||||
|
Taro.previewImage({
|
||||||
|
urls: [profitPicUrl],
|
||||||
|
current: profitPicUrl,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<View className="flex h-48 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50">
|
||||||
|
<Text className="text-gray-500">暂无利润表预览图片</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 底部按钮区域 */}
|
||||||
|
<View className="border-t border-gray-100 bg-white p-2.5">
|
||||||
|
<View className="flex flex-col gap-2.5">
|
||||||
|
{/* 保存利润表图片按钮 */}
|
||||||
|
{profitPicUrl && (
|
||||||
|
<Button
|
||||||
|
icon={<Icon name="download" size={16} color={"white"} />}
|
||||||
|
type="primary"
|
||||||
|
size={"large"}
|
||||||
|
block
|
||||||
|
onClick={handleSaveProfitImage}
|
||||||
|
className="flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<Text className="font-medium">保存图片</Text>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Excel操作按钮 */}
|
||||||
|
<View className="flex gap-3">
|
||||||
|
<View className="flex-1">
|
||||||
|
<Button
|
||||||
|
icon={
|
||||||
|
<Icon name="file-excel" size={16} color={"white"} />
|
||||||
|
}
|
||||||
|
type="primary"
|
||||||
|
size={"large"}
|
||||||
|
color="orange"
|
||||||
|
block
|
||||||
|
onClick={handleDownloadExcel}
|
||||||
|
>
|
||||||
|
<Text className="font-medium">下载Excel</Text>
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
{excelTempFilePath && (
|
||||||
|
<View className="flex-1">
|
||||||
|
<Button
|
||||||
|
icon={<Icon name="eye" size={16} />}
|
||||||
|
type="primary"
|
||||||
|
color="orange"
|
||||||
|
fill={"outline"}
|
||||||
|
size={"large"}
|
||||||
|
block
|
||||||
|
onClick={handleViewExcel}
|
||||||
|
>
|
||||||
|
<Text className="font-medium">查看Excel</Text>
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 提示信息 */}
|
||||||
|
<View className="text-center">
|
||||||
|
<Text className="text-xs text-gray-500">
|
||||||
|
点击预览图片可放大查看
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</TabPane>
|
||||||
|
)}
|
||||||
|
</Tabs>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import classNames from "classnames";
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
export type IconNames =
|
export type IconNames =
|
||||||
|
| "file-excel"
|
||||||
| "copy"
|
| "copy"
|
||||||
| "wallet"
|
| "wallet"
|
||||||
| "download"
|
| "download"
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
// App 相关常量
|
// App 相关常量
|
||||||
export const APP_VERSION = "v0.0.65";
|
export const APP_VERSION = "v0.0.66";
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont"; /* Project id 5042354 */
|
font-family: "iconfont"; /* Project id 5042354 */
|
||||||
src:
|
src:
|
||||||
url("//at.alicdn.com/t/c/font_5042354_c95qf1bojkl.woff2?t=1766645005700")
|
url("//at.alicdn.com/t/c/font_5042354_y6uqn91vagr.woff2?t=1767522385418")
|
||||||
format("woff2"),
|
format("woff2"),
|
||||||
url("//at.alicdn.com/t/c/font_5042354_c95qf1bojkl.woff?t=1766645005700")
|
url("//at.alicdn.com/t/c/font_5042354_y6uqn91vagr.woff?t=1767522385418")
|
||||||
format("woff"),
|
format("woff"),
|
||||||
url("//at.alicdn.com/t/c/font_5042354_c95qf1bojkl.ttf?t=1766645005700")
|
url("//at.alicdn.com/t/c/font_5042354_y6uqn91vagr.ttf?t=1767522385418")
|
||||||
format("truetype");
|
format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -17,6 +17,10 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-file-excel:before {
|
||||||
|
content: "\e639";
|
||||||
|
}
|
||||||
|
|
||||||
.icon-wallet:before {
|
.icon-wallet:before {
|
||||||
content: "\e638";
|
content: "\e638";
|
||||||
}
|
}
|
||||||
|
|||||||
@ -364,7 +364,11 @@ export default hocAuth(function Page(props: CommonComponent) {
|
|||||||
{step === 2 && <DeliveryStep2Preview moduleList={moduleList} />}
|
{step === 2 && <DeliveryStep2Preview moduleList={moduleList} />}
|
||||||
|
|
||||||
{step === 3 && pdfUrl && (
|
{step === 3 && pdfUrl && (
|
||||||
<DeliveryStep3Success pdfUrl={pdfUrl} picUrl={picUrl} />
|
<DeliveryStep3Success
|
||||||
|
pdfUrl={pdfUrl}
|
||||||
|
picUrl={picUrl}
|
||||||
|
orderVO={orderVO}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@ -3219,6 +3219,8 @@ declare namespace BusinessAPI {
|
|||||||
| "BOSS_REJECTED";
|
| "BOSS_REJECTED";
|
||||||
/** 采购类型：1_产地采购；2_市场采购； */
|
/** 采购类型：1_产地采购；2_市场采购； */
|
||||||
type?: "PRODUCTION_PURCHASE" | "MARKET_PURCHASE";
|
type?: "PRODUCTION_PURCHASE" | "MARKET_PURCHASE";
|
||||||
|
/** 月份 */
|
||||||
|
month?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
type OrderPackage = {
|
type OrderPackage = {
|
||||||
@ -3447,6 +3449,10 @@ declare namespace BusinessAPI {
|
|||||||
pdfUrl?: string;
|
pdfUrl?: string;
|
||||||
/** 图片文件地址 */
|
/** 图片文件地址 */
|
||||||
picUrl?: string;
|
picUrl?: string;
|
||||||
|
/** 利润表图片文件地址 */
|
||||||
|
profitPicUrl?: string;
|
||||||
|
/** 利润表文件地址 */
|
||||||
|
profitExcelUrl?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
type OrderShipCreateCmd = {
|
type OrderShipCreateCmd = {
|
||||||
@ -3645,6 +3651,10 @@ declare namespace BusinessAPI {
|
|||||||
pdfUrl?: string;
|
pdfUrl?: string;
|
||||||
/** 图片文件地址 */
|
/** 图片文件地址 */
|
||||||
picUrl?: string;
|
picUrl?: string;
|
||||||
|
/** 利润表图片文件地址 */
|
||||||
|
profitPicUrl?: string;
|
||||||
|
/** 利润表文件地址 */
|
||||||
|
profitExcelUrl?: string;
|
||||||
/** 发货单状态：0_草稿；1_待发货；2_待回款；3_待改签；4_部分回款；5_已回款；6_拒收完结；7_已完结； */
|
/** 发货单状态：0_草稿；1_待发货；2_待回款；3_待改签；4_部分回款；5_已回款；6_拒收完结；7_已完结； */
|
||||||
state:
|
state:
|
||||||
| "DRAFT"
|
| "DRAFT"
|
||||||
|
|||||||
@ -9,4 +9,4 @@
|
|||||||
export { OrderCalculator, WeightCalculationService } from "./calculators";
|
export { OrderCalculator, WeightCalculationService } from "./calculators";
|
||||||
|
|
||||||
// 模板类
|
// 模板类
|
||||||
export { PdfTemplate } from "./templates";
|
export { PdfTemplate, ProfitTableTemplate } from "./templates";
|
||||||
|
|||||||
@ -8,7 +8,48 @@ export class PdfTemplate {
|
|||||||
// 将预览内容转换为HTML字符串的函数
|
// 将预览内容转换为HTML字符串的函数
|
||||||
generateHtmlString = () => {
|
generateHtmlString = () => {
|
||||||
let htmlString = `
|
let htmlString = `
|
||||||
<style> @page {size: 210mm 297mm;margin: 0;padding: 0;}* {outline: none;box-sizing: border-box;margin: 0;padding: 0;border: 0 solid;}body {background-color: #fff;color: #4d4d4d;font-size: 14px;font-style: normal;box-sizing: border-box;}.page-wrap {width: 210mm;min-height: 297mm;margin: 0 auto;}.page-content {position: relative;box-sizing: border-box;width: 100%;height: 100%;padding: 20mm 10mm 0;display: flex;flex-direction: column;gap: 2mm;}@media print {.print-controls {display: none !important;}body {padding: 0;margin: 0;}}.print-module {margin-bottom: 15px;text-align: center;}.print-controls {position: fixed;top: 10px;right: 10px;z-index: 9999;}.print-button,.close-button {padding: 8px 16px;margin-left: 10px;cursor: pointer;border: 1px solid #d9d9d9;border-radius: 4px;}.print-button {background-color: #1890ff;color: white;}.close-button {background-color: #fff;color: #000;}.preview {width: 19cm;div {height: 0.7cm;}}.table-border {border: 2px solid #000;}.table-border>div {border-bottom: 1px solid #000;}.table-border>div>div {border-right: 1px solid #000;}.table-border>div>div:last-child {border-right: none;}.table-border>div:last-child {border-bottom: none;}.col-span-1 {grid-column: span 1 / span 1;}.col-span-2 {grid-column: span 2 / span 2;}.col-span-3 {grid-column: span 3 / span 3;}.col-span-6 {grid-column: span 6 / span 6;}.col-span-8 {grid-column: span 8 / span 8;}.flex {display: flex;}.items-center {align-items: center;}.grid {display: grid;}.w-full {width: 100%;}.grid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}.grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}.grid-cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}.grid-cols-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}.grid-cols-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}.grid-cols-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}.grid-cols-7 {grid-template-columns: repeat(7, minmax(0, 1fr));}.grid-cols-8 {grid-template-columns: repeat(8, minmax(0, 1fr));}.items-end {align-items: flex-end;}.justify-center {justify-content: center;}.border-t-0 {border-top-width: 0px;}.border-b {border-bottom-width: 1px;}.border-black {border-color: #000000;}.bg-white {background-color: #ffffff;}.text-2xl {font-size: 24px;line-height: 1;}.text-base {font-size: 16px;line-height: 1;}.text-lg {font-size: 18px;line-height: 1;}.font-bold {font-weight: bold;}.preview {width: 19cm;div {height: 0.69cm;}}.table-border {border: 2px solid #000;}.table-border>div {border-bottom: 1px solid #000;}.table-border>div>div {border-right: 1px solid #000;}.table-border>div>div:last-child {border-right: none;}.table-border>div:last-child {border-bottom: none;}.p-2 {padding:8px}</style>
|
<style>
|
||||||
|
@page {size: 210mm 297mm;margin: 0;padding: 0;}
|
||||||
|
* {outline: none;box-sizing: border-box;margin: 0;padding: 0;border: 0 solid;}
|
||||||
|
body {background-color: #fff;color: #4d4d4d;font-size: 14px;font-style: normal;box-sizing: border-box;}
|
||||||
|
.page-wrap {width: 210mm;min-height: 297mm;margin: 0 auto;}
|
||||||
|
.page-content {position: relative;box-sizing: border-box;width: 100%;height: 100%;padding: 20mm 10mm 0;display: flex;flex-direction: column;gap: 2mm;}
|
||||||
|
@media print {.print-controls {display: none !important;}body {padding: 0;margin: 0;}}
|
||||||
|
.col-span-1 {grid-column: span 1 / span 1;}
|
||||||
|
.col-span-2 {grid-column: span 2 / span 2;}
|
||||||
|
.col-span-3 {grid-column: span 3 / span 3;}
|
||||||
|
.col-span-6 {grid-column: span 6 / span 6;}
|
||||||
|
.col-span-8 {grid-column: span 8 / span 8;}
|
||||||
|
.flex {display: flex;}
|
||||||
|
.items-center {align-items: center;}
|
||||||
|
.grid {display: grid;}
|
||||||
|
.w-full {width: 100%;}
|
||||||
|
.grid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
|
||||||
|
.grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
|
||||||
|
.grid-cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
|
||||||
|
.grid-cols-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
|
||||||
|
.grid-cols-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
|
||||||
|
.grid-cols-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
|
||||||
|
.grid-cols-7 {grid-template-columns: repeat(7, minmax(0, 1fr));}
|
||||||
|
.grid-cols-8 {grid-template-columns: repeat(8, minmax(0, 1fr));}
|
||||||
|
.items-end {align-items: flex-end;}
|
||||||
|
.justify-center {justify-content: center;}
|
||||||
|
.border-t-0 {border-top-width: 0px;}
|
||||||
|
.border-b {border-bottom-width: 1px;}
|
||||||
|
.border-black {border-color: #000000;}
|
||||||
|
.bg-white {background-color: #ffffff;}
|
||||||
|
.text-2xl {font-size: 24px;line-height: 1;}
|
||||||
|
.text-base {font-size: 16px;line-height: 1;}
|
||||||
|
.text-lg {font-size: 18px;line-height: 1;}
|
||||||
|
.font-bold {font-weight: bold;}
|
||||||
|
.preview {width: 19cm;div {height: 0.69cm;}}
|
||||||
|
.table-border {border: 2px solid #000;}
|
||||||
|
.table-border>div {border-bottom: 1px solid #000;}
|
||||||
|
.table-border>div>div {border-right: 1px solid #000;}
|
||||||
|
.table-border>div>div:last-child {border-right: none;}
|
||||||
|
.table-border>div:last-child {border-bottom: none;}
|
||||||
|
.p-2 {padding:8px}
|
||||||
|
</style>
|
||||||
<div class="page-wrap">
|
<div class="page-wrap">
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -0,0 +1,107 @@
|
|||||||
|
// 利润表数据接口
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import "dayjs/locale/zh-cn";
|
||||||
|
|
||||||
|
dayjs.locale("zh-cn");
|
||||||
|
|
||||||
|
export interface ProfitTableRow {
|
||||||
|
vehicleNo: string; // 车次
|
||||||
|
shippingDate: string; // 发货日期
|
||||||
|
originCost: number; // 产地成本
|
||||||
|
quoteAmount: number; // 报价金额
|
||||||
|
profit: number; // 利润
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ProfitTableTemplate {
|
||||||
|
private data: ProfitTableRow[];
|
||||||
|
private month: string;
|
||||||
|
|
||||||
|
constructor(data: ProfitTableRow[], month: string) {
|
||||||
|
this.data = data;
|
||||||
|
this.month = month;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将利润表内容转换为HTML字符串的函数
|
||||||
|
generateHtmlString = () => {
|
||||||
|
// 计算合计
|
||||||
|
const totalOriginCost = this.data.reduce(
|
||||||
|
(sum, row) => sum + row.originCost,
|
||||||
|
0,
|
||||||
|
);
|
||||||
|
const totalQuoteAmount = this.data.reduce(
|
||||||
|
(sum, row) => sum + row.quoteAmount,
|
||||||
|
0,
|
||||||
|
);
|
||||||
|
const totalProfit = this.data.reduce((sum, row) => sum + row.profit, 0);
|
||||||
|
|
||||||
|
return `
|
||||||
|
<style>
|
||||||
|
@page {size: 210mm 297mm;margin: 0;padding: 0;}
|
||||||
|
* {outline: none;box-sizing: border-box;margin: 0;padding: 0;border: 0 solid;}
|
||||||
|
body {background-color: #fff;color: #4d4d4d;font-size: 14px;font-style: normal;box-sizing: border-box;}
|
||||||
|
.page-wrap {width: 210mm;min-height: 297mm;margin: 0 auto;}
|
||||||
|
.page-content {position: relative;box-sizing: border-box;width: 100%;height: 100%;padding: 20mm 10mm 0;display: flex;flex-direction: column;gap: 2mm;}
|
||||||
|
@media print {.print-controls {display: none !important;}body {padding: 0;margin: 0;}}
|
||||||
|
.preview {width: 19cm;}
|
||||||
|
.table-border {border: 2px solid #000;border-collapse: collapse;width: 100%;}
|
||||||
|
.table-border th,
|
||||||
|
.table-border td {border: 1px solid #000;padding: 8px;text-align: center;}
|
||||||
|
.table-border th {font-weight: bold;background-color: #f5f5f5;}
|
||||||
|
.table-title {font-size: 20px;font-weight: bold;text-align: center;padding: 16px;border: 2px solid #000;border-bottom: none;}
|
||||||
|
.text-center {text-align: center;}
|
||||||
|
.text-right {text-align: right;}
|
||||||
|
.font-bold {font-weight: bold;}
|
||||||
|
.text-xl {font-size: 20px;}
|
||||||
|
.text-lg {font-size: 18px;}
|
||||||
|
.text-2xl {font-size: 24px;}
|
||||||
|
.mb-4 {margin-bottom: 16px;}
|
||||||
|
.p-4 {padding: 16px;}
|
||||||
|
.gap-4 {gap: 16px;}
|
||||||
|
.negative {color: #ff0000;}
|
||||||
|
.positive {color: #00ff00;}
|
||||||
|
.footer {background-color: yellow}
|
||||||
|
</style>
|
||||||
|
<div class="page-wrap">
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="preview">
|
||||||
|
<div class="table-title">诚信志远利润明细</div>
|
||||||
|
<table class="table-border">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 20%;">车次</th>
|
||||||
|
<th style="width: 20%;">发货日期</th>
|
||||||
|
<th style="width: 20%;">产地成本</th>
|
||||||
|
<th style="width: 20%;">报价金额</th>
|
||||||
|
<th style="width: 20%;">利润</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
${this.data
|
||||||
|
.map(
|
||||||
|
(row) => `
|
||||||
|
<tr>
|
||||||
|
<td>${row.vehicleNo}</td>
|
||||||
|
<td>${row.shippingDate}</td>
|
||||||
|
<td>${row.originCost}</td>
|
||||||
|
<td>${row.quoteAmount}</td>
|
||||||
|
<td>${row.profit.toFixed(2)}</td>
|
||||||
|
</tr>
|
||||||
|
`,
|
||||||
|
)
|
||||||
|
.join("")}
|
||||||
|
</tbody>
|
||||||
|
<tfoot class="footer">
|
||||||
|
<tr class="font-bold">
|
||||||
|
<td colspan="2">${dayjs(this.month).format("MMMM")}合计</td>
|
||||||
|
<td>${totalOriginCost.toFixed(2)}</td>
|
||||||
|
<td>${totalQuoteAmount.toFixed(2)}</td>
|
||||||
|
<td>${totalProfit.toFixed(2)}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -5,4 +5,5 @@
|
|||||||
* import { PdfTemplate } from '@/utils/classes/templates'
|
* import { PdfTemplate } from '@/utils/classes/templates'
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export { PdfTemplate } from './PdfTemplate'
|
export { PdfTemplate } from "./PdfTemplate";
|
||||||
|
export { ProfitTableTemplate } from "./ProfitTableTemplate";
|
||||||
|
|||||||
@ -2,6 +2,15 @@ import Taro from "@tarojs/taro";
|
|||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import {utils, write} from "xlsx";
|
import {utils, write} from "xlsx";
|
||||||
|
|
||||||
|
// 利润表行数据接口
|
||||||
|
export interface ProfitTableRow {
|
||||||
|
vehicleNo: string; // 车次
|
||||||
|
shippingDate: string; // 发货日期
|
||||||
|
originCost: number; // 产地成本
|
||||||
|
quoteAmount: number; // 报价金额
|
||||||
|
profit: number; // 利润
|
||||||
|
}
|
||||||
|
|
||||||
// 费用统计数据接口
|
// 费用统计数据接口
|
||||||
interface ExpenseStatistics {
|
interface ExpenseStatistics {
|
||||||
totalVehicles: number;
|
totalVehicles: number;
|
||||||
@ -336,3 +345,98 @@ export const exportExcel = async (
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导出利润表Excel文件
|
||||||
|
* @param data 利润表数据
|
||||||
|
* @param month 月份（格式：YYYY-MM）
|
||||||
|
* @returns Promise<string>
|
||||||
|
*/
|
||||||
|
export const exportProfitTableExcel = async (
|
||||||
|
data: ProfitTableRow[],
|
||||||
|
month: string,
|
||||||
|
): Promise<string> => {
|
||||||
|
// 创建工作簿
|
||||||
|
const wb = utils.book_new();
|
||||||
|
|
||||||
|
// 创建工作表数据
|
||||||
|
const wsData: (string | number)[][] = [];
|
||||||
|
|
||||||
|
// 添加标题
|
||||||
|
wsData.push([`诚信志远利润明细`]);
|
||||||
|
wsData.push([]); // 空行
|
||||||
|
|
||||||
|
// 添加表头
|
||||||
|
wsData.push(["车次", "发货日期", "产地成本", "报价金额", "利润"]);
|
||||||
|
|
||||||
|
// 添加数据行
|
||||||
|
data.forEach((row) => {
|
||||||
|
wsData.push([
|
||||||
|
row.vehicleNo,
|
||||||
|
row.shippingDate,
|
||||||
|
row.originCost,
|
||||||
|
row.quoteAmount,
|
||||||
|
row.profit,
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加合计行
|
||||||
|
const totalOriginCost = data.reduce((sum, row) => sum + row.originCost, 0);
|
||||||
|
const totalQuoteAmount = data.reduce((sum, row) => sum + row.quoteAmount, 0);
|
||||||
|
const totalProfit = data.reduce((sum, row) => sum + row.profit, 0);
|
||||||
|
|
||||||
|
wsData.push([]);
|
||||||
|
wsData.push([
|
||||||
|
dayjs(month).format("MMMM") + "合计",
|
||||||
|
"-",
|
||||||
|
totalOriginCost.toFixed(2),
|
||||||
|
totalQuoteAmount.toFixed(2),
|
||||||
|
totalProfit.toFixed(2),
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 创建工作表
|
||||||
|
const ws = utils.aoa_to_sheet(wsData);
|
||||||
|
|
||||||
|
// 设置列宽
|
||||||
|
const wscols = [
|
||||||
|
{ wch: 15 }, // 车次
|
||||||
|
{ wch: 15 }, // 发货日期
|
||||||
|
{ wch: 15 }, // 产地成本
|
||||||
|
{ wch: 15 }, // 报价金额
|
||||||
|
{ wch: 15 }, // 利润
|
||||||
|
];
|
||||||
|
ws["!cols"] = wscols;
|
||||||
|
|
||||||
|
// 将工作表添加到工作簿
|
||||||
|
utils.book_append_sheet(wb, ws, "诚信志远利润明细");
|
||||||
|
|
||||||
|
// 生成文件名
|
||||||
|
const fileName = `诚信志远利润明细_${month}_${dayjs().format("YYYY-MM-DD_HH-mm-ss")}.xlsx`;
|
||||||
|
|
||||||
|
// 根据环境选择不同的导出方式
|
||||||
|
const processEnv = process.env.TARO_ENV;
|
||||||
|
|
||||||
|
if (processEnv === "h5") {
|
||||||
|
// H5环境：创建下载链接
|
||||||
|
const excelBuffer = write(wb, { type: "array", bookType: "xlsx" });
|
||||||
|
const blob = new Blob([excelBuffer], {
|
||||||
|
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||||
|
});
|
||||||
|
|
||||||
|
// 创建下载链接
|
||||||
|
return window.URL.createObjectURL(blob);
|
||||||
|
} else {
|
||||||
|
// 小程序环境：使用文件系统API
|
||||||
|
const excelBuffer = write(wb, { type: "array", bookType: "xlsx" });
|
||||||
|
|
||||||
|
// 将文件保存到本地
|
||||||
|
const filePath = `${Taro.env.USER_DATA_PATH}/${fileName}`;
|
||||||
|
Taro.getFileSystemManager().writeFile({
|
||||||
|
filePath,
|
||||||
|
data: excelBuffer,
|
||||||
|
encoding: "binary",
|
||||||
|
});
|
||||||
|
|
||||||
|
return filePath;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user