From 0c39c005bddf211c66b01c87bb8fd41d0c017410 Mon Sep 17 00:00:00 2001 From: shenyifei Date: Fri, 7 Nov 2025 00:36:09 +0800 Subject: [PATCH] =?UTF-8?q?refactor(dealer):=20=E9=87=8D=E6=9E=84=E7=BB=8F?= =?UTF-8?q?=E9=94=80=E5=95=86=E6=A8=A1=E5=9D=97=E9=85=8D=E7=BD=AE=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 使用 BetaSchemaForm 替代原有 Form 组件 - 移除冗余的表单配置渲染逻辑 - 动态生成模块配置表单结构 - 优化模块配置项的展示与交互 - 统一配置面板的数据流处理方式 - 提升配置面板的可维护性和扩展性 --- .../components/Dealer/DeliveryTemplate.tsx | 568 ++++++++++++++++-- .../components/Dealer/Module/ConfigPanel.tsx | 336 +---------- .../Dealer/Module/DealerInfoModule.tsx | 4 +- .../Dealer/Module/OtherFeesModule.tsx | 11 +- .../Dealer/Module/OtherInfoModule.tsx | 10 +- .../Dealer/Module/PackingSpecModule.tsx | 341 +++++++---- .../Dealer/Module/PreviewCanvas.tsx | 1 - .../Dealer/Module/ShippingInfoModule.tsx | 8 +- .../components/Dealer/Module/TitleModule.tsx | 4 +- .../Dealer/Module/TotalAmountModule.tsx | 10 +- .../Dealer/Module/VehicleInfoModule.tsx | 46 +- .../Dealer/Module/WeightInfoModule.tsx | 180 +++--- packages/app-operation/src/global.less | 25 +- packages/app-operation/src/locales/zh-CN.ts | 17 +- 14 files changed, 933 insertions(+), 628 deletions(-) diff --git a/packages/app-operation/src/components/Dealer/DeliveryTemplate.tsx b/packages/app-operation/src/components/Dealer/DeliveryTemplate.tsx index 0973deb..f990e51 100644 --- a/packages/app-operation/src/components/Dealer/DeliveryTemplate.tsx +++ b/packages/app-operation/src/components/Dealer/DeliveryTemplate.tsx @@ -15,7 +15,7 @@ import { RouteContext, RouteContextType, } from '@ant-design/pro-components'; -import { Col, message, Row, Space } from 'antd'; +import { Col, message, Row } from 'antd'; import { useEffect, useState } from 'react'; // 默认模块配置 @@ -33,57 +33,446 @@ type DealerIdAndTemplate = Pick< 'dealerId' | 'deliveryTemplate' >; -const getDefaultModuleConfig = (moduleType: string): ModuleConfig => { - const defaults = { - title: { - text: '西瓜发货清单', - align: 'center', - size: 'large', - }, +// 定义各模块的表单配置 +const getModuleFormSchema = (moduleType: string) => { + const schemas = { + title: [ + { + title: '显示配置', + valueType: 'group', + columns: [ + { + dataIndex: 'title', + title: '标题文本', + valueType: 'text', + fieldProps: { + placeholder: '例如：西瓜发货清单', + }, + }, + ], + }, + ], + dealerInfo: [ + { + title: '显示配置', + valueType: 'group', + columns: [ + { + dataIndex: 'showDealerName', + title: '显示经销商名称', + valueType: 'switch', + }, + { + dataIndex: 'dealerName', + title: '经销商名称', + valueType: 'text', + fieldProps: { + placeholder: '请输入经销商名称', + }, + }, + { + dataIndex: 'showVehicleNumber', + title: '显示车次信息', + valueType: 'switch', + }, + { + dataIndex: 'showDestination', + title: '显示收货地', + valueType: 'switch', + }, + { + dataIndex: 'showWatermelonGrade', + title: '显示西瓜品级', + valueType: 'switch', + tooltip: '单条报价有效', + }, + ], + }, + { + title: '内容配置', + valueType: 'group', + columns: [ + { + dataIndex: 'requiredWatermelonGrade', + title: '填写西瓜品级', + valueType: 'switch', + tooltip: '单条报价有效', + }, + ], + }, + ], + shippingInfo: [ + { + title: '显示配置', + valueType: 'group', + columns: [ + { + dataIndex: 'showShippingFrom', + title: '显示发货地', + valueType: 'switch', + }, + { + dataIndex: 'showDate', + title: '显示发货日期', + valueType: 'switch', + }, + ], + }, + { + title: '内容配置', + valueType: 'group', + columns: [ + { + dataIndex: 'requiredShippingFrom', + title: '填写发货地', + valueType: 'switch', + }, + ], + }, + ], + weightInfo: [ + { + title: '显示配置', + valueType: 'group', + columns: [ + { + dataIndex: 'showGrossWeight', + title: '显示毛重', + valueType: 'switch', + }, + { + dataIndex: 'grossWeightUnit', + title: '单位', + valueType: 'select', + valueEnum: { + 1: '斤', + 2: '公斤', + }, + }, + { + dataIndex: 'showBoxWeight', + title: '显示箱重', + valueType: 'switch', + }, + { + dataIndex: 'boxWeightUnit', + title: '单位', + valueType: 'select', + valueEnum: { + 1: '斤', + 2: '公斤', + }, + }, + { + dataIndex: 'showNetWeight', + title: '显示净重', + valueType: 'switch', + }, + { + dataIndex: 'netWeightUnit', + title: '单位', + valueType: 'select', + valueEnum: { + 1: '斤', + 2: '公斤', + }, + }, + { + dataIndex: 'showUnitPrice', + title: '显示单价', + valueType: 'switch', + }, + { + dataIndex: 'unitPriceUnit', + title: '单位', + valueType: 'select', + valueEnum: { + 1: '元/斤', + 2: '元/公斤', + }, + }, + { + dataIndex: 'showAmount', + title: '显示金额', + valueType: 'switch', + }, + { + dataIndex: 'showGrade', + title: '显示品级', + valueType: 'switch', + }, + { + dataIndex: 'showAccountCompany', + title: '显示入账公司', + valueType: 'switch', + }, + { + dataIndex: 'showSumAmount', + title: '显示总计', + valueType: 'switch', + tooltip: '多条报价之和', + }, + ], + }, + { + title: '内容配置', + valueType: 'group', + columns: [ + { + dataIndex: 'requiredGrade', + title: '填写西瓜品级', + valueType: 'switch', + }, + ], + }, + ], + packingSpec: [ + { + title: '显示配置', + valueType: 'group', + columns: [ + { + dataIndex: 'showBoxType', + title: '显示箱号', + valueType: 'switch', + }, + { + dataIndex: 'showQuantity', + title: '显示数量', + valueType: 'switch', + }, + { + dataIndex: 'showUnitPrice', + title: '显示单价', + valueType: 'switch', + }, + { + dataIndex: 'showAmount', + title: '显示金额', + valueType: 'switch', + }, + { + dataIndex: 'showUnitWeight', + title: '显示单重', + valueType: 'switch', + }, + { + dataIndex: 'showWeight', + title: '显示重量', + valueType: 'switch', + }, + ], + }, + ], + vehicleInfo: [ + { + title: '显示配置', + valueType: 'group', + columns: [ + { + dataIndex: 'showDriverPhone', + title: '显示司机号码', + valueType: 'switch', + }, + { + dataIndex: 'showLicensePlate', + title: '显示车牌', + valueType: 'switch', + }, + { + dataIndex: 'showEstimatedArrivalTime', + title: '显示预计到仓时间', + valueType: 'switch', + }, + { + dataIndex: 'showFreightDebt', + title: '显示运费欠', + valueType: 'switch', + }, + { + dataIndex: 'showStrawMatDebt', + title: '显示草帘欠', + valueType: 'switch', + }, + { + dataIndex: 'showRemarks', + title: '显示备注', + valueType: 'switch', + }, + { + dataIndex: 'freightDebtTitle', + title: '运费欠标题', + valueType: 'text', + fieldProps: { + placeholder: '请输入运费欠标题', + }, + }, + ], + }, + { + title: '内容配置', + valueType: 'group', + columns: [ + { + dataIndex: 'requiredEstimatedArrivalTime', + title: '填写预计到仓时间', + valueType: 'switch', + }, + { + dataIndex: 'requiredRemarks', + title: '填写备注', + valueType: 'switch', + }, + ], + }, + ], + otherFees: [ + { + title: '显示配置', + valueType: 'group', + columns: [ + { + dataIndex: 'feeItems', + title: '显示费用项目', + valueType: 'checkbox', + valueEnum: { + trademark: '商标', + labor: '人工', + paperBox: '纸箱', + fee: '费用', + codingFee: '打码费', + }, + }, + ], + }, + ], + totalAmount: [ + { + title: '显示配置', + valueType: 'group', + columns: [ + { + dataIndex: 'showTotalAmount', + title: '显示合计金额', + valueType: 'switch', + }, + { + dataIndex: 'showFarmer', + title: '信息瓜农', + valueType: 'switch', + }, + { + dataIndex: 'sumTitle', + title: '合计金额标题', + valueType: 'text', + fieldProps: { + placeholder: '请输入合计金额标题', + }, + }, + ], + }, + ], + otherInfo: [ + { + title: '显示配置', + valueType: 'group', + columns: [ + { + dataIndex: 'showOrigin', + title: '显示产地', + valueType: 'switch', + }, + { + dataIndex: 'showSupplier', + title: '显示供应商', + valueType: 'switch', + }, + { + dataIndex: 'showDepartureTime', + title: '显示发车时间', + valueType: 'switch', + }, + { + dataIndex: 'showArrivalTime', + title: '显示预计到达', + valueType: 'switch', + }, + { + dataIndex: 'showProductName', + title: '显示品名', + valueType: 'switch', + }, + ], + }, + ], + } as any; + + return schemas[moduleType] || []; +}; + +// 模块结构配置 - 定义每个模块的字段和默认显示设置 +const getModuleStructure = (moduleType: string) => { + const structures = { + title: {}, dealerInfo: { - dealerName: '盛京水果', - vehicleNumber: '第188车', - destination: '宁夏', - watermelonGrade: 'A级', showDealerName: true, showVehicleNumber: true, showDestination: true, showWatermelonGrade: true, + requiredWatermelonGrade: true, }, shippingInfo: { - shippingFrom: '宁夏', - date: '2025年8月18日', showShippingFrom: true, showDate: true, + requiredShippingFrom: true, }, weightInfo: { - grossWeight: '56960', - boxWeight: '3391', - netWeight: '53569', - unitPrice: '1.60', - amount: '85710', - grade: 'A', - accountCompany: '公司名称', - sumAmount: '85710', showGrossWeight: true, + grossWeightUnit: '1', showBoxWeight: true, + boxWeightUnit: '1', showNetWeight: true, + netWeightUnit: '1', showUnitPrice: true, + unitPriceUnit: '1', showAmount: true, showGrade: true, showAccountCompany: true, showSumAmount: true, + requiredGrade: true, }, packingSpec: { columns: [ - 'boxCategory', - 'boxType', - 'quantity', - 'unitPrice', - 'amount', - 'unitWeight', - 'weight', + { + dataIndex: 'boxCategory', + title: '', + }, + { + dataIndex: 'boxType', + title: '箱号', + }, + { + dataIndex: 'quantity', + title: '数量', + }, + { + dataIndex: 'unitPrice', + title: '单价', + }, + { + dataIndex: 'amount', + title: '金额', + }, + { + dataIndex: 'unitWeight', + title: '单重', + }, + { + dataIndex: 'weight', + title: '重量', + }, ], + showBoxCategory: true, showBoxType: true, showQuantity: true, @@ -91,6 +480,85 @@ const getDefaultModuleConfig = (moduleType: string): ModuleConfig => { showAmount: true, showUnitWeight: true, showWeight: true, + }, + vehicleInfo: { + freightDebtTitle: '运费欠', + showDriverPhone: true, + showLicensePlate: true, + showEstimatedArrivalTime: true, + showFreightDebt: true, + showStrawMatDebt: true, + showRemarks: true, + requiredEstimatedArrivalTime: true, + requiredRemarks: true, + }, + otherFees: { + feeItems: ['trademark', 'labor', 'paperBox', 'fee', 'codingFee'], + feeLabels: { + trademark: '商标', + labor: '人工', + paperBox: '纸箱', + fee: '费用', + codingFee: '打码费', + }, + }, + totalAmount: { + sumTitle: '合计金额', + showTotalAmount: true, + showFarmer: true, + }, + otherInfo: { + showOrigin: true, + showSupplier: true, + showDepartureTime: true, + showArrivalTime: true, + showProductName: true, + format: 'list', + }, + }; + + return structures[moduleType as keyof typeof structures] || {}; +}; + +// 模块示例数据 - 用于模板编辑时的预览 +const getModuleExampleData = (moduleType: string) => { + const examples = { + title: { + title: '西瓜发货清单', + }, + dealerInfo: { + dealerName: '盛京水果', + vehicleNumber: '第188车', + destination: '宁夏', + watermelonGrade: 'A级', + }, + shippingInfo: { + shippingFrom: '宁夏', + date: '2025年8月18日', + }, + weightInfo: { + data: [ + { + grossWeight: '56960', + boxWeight: '3391', + netWeight: '53569', + unitPrice: '1.60', + amount: '85710', + grade: 'A', + }, + { + grossWeight: '56960', + boxWeight: '3391', + netWeight: '53569', + unitPrice: '1.60', + amount: '85710', + grade: 'A', + }, + ], + accountCompany: '公司名称', + sumAmount: '85710', + }, + packingSpec: { data: [ { boxCategory: '4粒', @@ -126,52 +594,36 @@ const getDefaultModuleConfig = (moduleType: string): ModuleConfig => { licensePlate: '京A12345', estimatedArrivalTime: '2025年9月24日', freightDebt: '11000', - seller: '卖货', strawMatDebt: '100', remarks: '备注', - freightDebtTitle: '运费欠', - showDriverPhone: true, - showLicensePlate: true, - showEstimatedArrivalTime: true, - showFreightDebt: true, - showSeller: true, - showStrawMatDebt: true, - showRemarks: true, }, otherFees: { - enabled: true, - feeItems: ['trademark', 'labor', 'paperBox', 'fee', 'codingFee'], trademark: '400', labor: '600', paperBox: '13,253', fee: '2,000', codingFee: '300', - laborDetails: false, }, totalAmount: { - enabled: true, - sumTitle: '合计金额', amount: '102,263', farmer: '李荣赞', - showTotalAmount: true, - showFarmer: true, }, otherInfo: { - enabled: false, origin: '内蒙古', supplier: '北京新发龙盛商贸有限公司', departureTime: '9月2号', arrivalTime: '9月3号', productName: 'A级-麒麟爪', - showOrigin: true, - showSupplier: true, - showDepartureTime: true, - showArrivalTime: true, - showProductName: true, - format: 'list', }, - } as any; - return { ...defaults[moduleType] }; + }; + + return examples[moduleType as keyof typeof examples] || {}; +}; + +const getDefaultModuleConfig = (moduleType: string): ModuleConfig => { + const structure = getModuleStructure(moduleType); + const exampleData = getModuleExampleData(moduleType); + return { ...structure, ...exampleData }; }; export default function DeliveryTemplate(props: IDeliveryTemplateProps) { @@ -199,13 +651,15 @@ export default function DeliveryTemplate(props: IDeliveryTemplateProps) { const newModule = { id: `module_${Date.now()}`, type: moduleType, + title: intl.formatMessage({ id: `${intlPrefix}.module.${moduleType}` }), config: getDefaultModuleConfig(moduleType), + schemas: getModuleFormSchema(moduleType), }; // 如果有选中的模块，则将新模块插入到选中模块的下方 if (selectedModule) { const selectedIndex = modules.findIndex( - (module) => module.id === selectedModule.id + (module) => module.id === selectedModule.id, ); if (selectedIndex !== -1) { @@ -213,7 +667,7 @@ export default function DeliveryTemplate(props: IDeliveryTemplateProps) { const newModules = [...modules]; newModules.splice(selectedIndex + 1, 0, newModule); setModules(newModules); - setSelectedModule(newModule); // 立即选中新插入的模块 + setSelectedModule(newModule); // 立即选中新插入的模块 return; } } @@ -221,7 +675,7 @@ export default function DeliveryTemplate(props: IDeliveryTemplateProps) { // 如果没有选中的模块，则添加到末尾 const newModules = [...modules, newModule]; setModules(newModules); - setSelectedModule(newModule); // 立即选中新插入的模块 + setSelectedModule(newModule); // 立即选中新插入的模块 }; const handleModuleSelect = (module: any) => { diff --git a/packages/app-operation/src/components/Dealer/Module/ConfigPanel.tsx b/packages/app-operation/src/components/Dealer/Module/ConfigPanel.tsx index e774875..a7f21c2 100644 --- a/packages/app-operation/src/components/Dealer/Module/ConfigPanel.tsx +++ b/packages/app-operation/src/components/Dealer/Module/ConfigPanel.tsx @@ -1,4 +1,5 @@ -import { Card, Checkbox, Empty, Form, Input, Switch } from 'antd'; +import { BetaSchemaForm } from '@ant-design/pro-components'; +import { Card, Empty } from 'antd'; import React from 'react'; interface ConfigPanelProps { @@ -10,14 +11,6 @@ const ConfigPanel: React.FC = ({ selectedModule, onConfigChange, }) => { - const [form] = Form.useForm(); - - React.useEffect(() => { - if (selectedModule) { - form.setFieldsValue(selectedModule.config); - } - }, [selectedModule, form]); - const handleValuesChange = (changedValues: any, allValues: any) => { if (selectedModule) { onConfigChange(selectedModule.id, { @@ -27,309 +20,6 @@ const ConfigPanel: React.FC = ({ } }; - const renderTitleConfig = () => ( -
-
标题配置
- - - -
- ); - - const renderDealerInfoConfig = () => ( -
-
经销商信息配置
- - - - - - - - - - - - - - - -
- ); - - const renderWeightInfoConfig = () => ( -
-
重量信息配置
- - - - - - - - - - - - - - - - - - - - - - - - -
- ); - - const renderPackingSpecConfig = () => ( -
-
表格列配置
- - - - - - - - - - - - - - - - - - - - - -
- ); - - const renderOtherFeesConfig = () => ( -
-
费用项目配置
- - - - - -
- 商标 -
-
- 人工 -
-
- 纸箱 -
-
- 费用 -
-
- 打码费 -
- - - - - -
- ); - - const renderModuleConfig = () => { - if (!selectedModule) return null; - - const configs = { - title: renderTitleConfig(), - dealerInfo: renderDealerInfoConfig(), - shippingInfo: ( -
-
发货信息配置
- - - - - - -
- ), - weightInfo: renderWeightInfoConfig(), - packingSpec: renderPackingSpecConfig(), - vehicleInfo: ( -
-
车辆信息配置
- - - - - - - - - - - - - - - - - - - - - - - - -
- ), - otherFees: renderOtherFeesConfig(), - totalAmount: ( -
-
合计金额配置
- - - - - - - - - -
- ), - otherInfo: ( -
-
其他信息配置
- - - - - - - - - - - - - - - - - - -
- ), - } as any; - - return configs[selectedModule.type] ||
该模块暂无配置项
; - }; - if (!selectedModule) { return ( = ({ size="small" className="bg-white rounded-lg p-4 h-full" > -
- {renderModuleConfig()} -
+ {selectedModule.config && selectedModule.schemas && ( + { + return Promise.resolve(selectedModule.config); + }} + onValuesChange={handleValuesChange} + columns={selectedModule.schemas} + submitter={false} + /> + )} ); }; diff --git a/packages/app-operation/src/components/Dealer/Module/DealerInfoModule.tsx b/packages/app-operation/src/components/Dealer/Module/DealerInfoModule.tsx index 03a06e4..43bea05 100644 --- a/packages/app-operation/src/components/Dealer/Module/DealerInfoModule.tsx +++ b/packages/app-operation/src/components/Dealer/Module/DealerInfoModule.tsx @@ -89,7 +89,7 @@ const DealerInfoModule: React.FC = ({ >
{config.showDealerName || config.showWatermelonGrade ? ( -
+
{config.showWatermelonGrade ? `${config.dealerName}-${config.watermelonGrade}` : config.dealerName} @@ -98,7 +98,7 @@ const DealerInfoModule: React.FC = ({
)} {config.showDestination || config.showVehicleNumber ? ( -
+
{config.destination} {config.vehicleNumber}
diff --git a/packages/app-operation/src/components/Dealer/Module/OtherFeesModule.tsx b/packages/app-operation/src/components/Dealer/Module/OtherFeesModule.tsx index dc30ae9..2ddfc0c 100644 --- a/packages/app-operation/src/components/Dealer/Module/OtherFeesModule.tsx +++ b/packages/app-operation/src/components/Dealer/Module/OtherFeesModule.tsx @@ -32,13 +32,6 @@ const OtherFeesModule: React.FC = ({ canMoveDown, previewMode = false, // 默认为false }) => { - const feeLabels = { - trademark: '商标', - labor: '人工', - paperBox: '纸箱', - fee: '费用', - codingFee: '打码费', - } as any; return (
= ({
{config.feeItems.map((feeType: any) => ( -
{feeLabels[feeType]}：
+
{config?.feeLabels?.[feeType] || ''}：
{config[feeType]}元
diff --git a/packages/app-operation/src/components/Dealer/Module/OtherInfoModule.tsx b/packages/app-operation/src/components/Dealer/Module/OtherInfoModule.tsx index dc49ed5..075fcb4 100644 --- a/packages/app-operation/src/components/Dealer/Module/OtherInfoModule.tsx +++ b/packages/app-operation/src/components/Dealer/Module/OtherInfoModule.tsx @@ -34,11 +34,11 @@ const OtherInfoModule: React.FC = ({ }) => { return (
{!previewMode && ( diff --git a/packages/app-operation/src/components/Dealer/Module/PackingSpecModule.tsx b/packages/app-operation/src/components/Dealer/Module/PackingSpecModule.tsx index c49e623..7a120a9 100644 --- a/packages/app-operation/src/components/Dealer/Module/PackingSpecModule.tsx +++ b/packages/app-operation/src/components/Dealer/Module/PackingSpecModule.tsx @@ -1,124 +1,245 @@ -import React from 'react'; -import { Button, Typography } from 'antd'; import { - MenuOutlined, - ArrowUpOutlined, - ArrowDownOutlined, - DeleteOutlined + ArrowDownOutlined, + ArrowUpOutlined, + DeleteOutlined, + MenuOutlined, } from '@ant-design/icons'; +import { Button, Typography } from 'antd'; +import classNames from 'classnames'; +import React from 'react'; const { Text } = Typography; interface ModuleProps { - config: any; - isSelected: boolean; - onSelect: () => void; - onDelete: () => void; - onMoveUp?: () => void; - onMoveDown?: () => void; - canMoveUp?: boolean; - canMoveDown?: boolean; - previewMode?: boolean; // 添加预览模式属性 + config: any; + isSelected: boolean; + onSelect: () => void; + onDelete: () => void; + onMoveUp?: () => void; + onMoveDown?: () => void; + canMoveUp?: boolean; + canMoveDown?: boolean; + previewMode?: boolean; // 添加预览模式属性 } const PackingSpecModule: React.FC = ({ - config, - isSelected, - onSelect, - onDelete, - onMoveUp, - onMoveDown, - canMoveUp, - canMoveDown, - previewMode = false, // 默认为false + config, + isSelected, + onSelect, + onDelete, + onMoveUp, + onMoveDown, + canMoveUp, + canMoveDown, + previewMode = false, // 默认为false }) => { - const columns = []; - if (config.showBoxCategory) columns.push(''); - if (config.showBoxType) columns.push('箱号'); - if (config.showQuantity) columns.push('数量'); - if (config.showUnitPrice) columns.push('单价'); - if (config.showAmount) columns.push('金额'); - if (config.showUnitWeight) columns.push('单重'); - if (config.showWeight) columns.push('重量'); + // 计算需要显示的列数 + const visibleColumnCount = + [ + config.showBoxType, + config.showQuantity, + config.showUnitPrice, + config.showAmount, + config.showUnitWeight, + config.showWeight, + ].filter(Boolean).length + 1; // +1 是因为"规格："列总是显示 + console.log('visibleColumnCount', visibleColumnCount); - return ( -
- {!previewMode && ( -
- 装箱规格表格模块 -
-
-
- )} -
- - - - {columns.map((col) => ( - - ))} - - - - {config.data.map((row: any, index: any) => ( - - {config.showBoxCategory && } - {config.showBoxType && } - {config.showQuantity && } - {config.showUnitPrice && } - {config.showAmount && } - {config.showUnitWeight && } - {config.showWeight && } - - ))} - -
{col}
{row.boxCategory}{row.boxType}{row.quantity}{row.unitPrice}{row.amount}{row.unitWeight}{row.weight}
-
-
- ); + return ( +
+ {!previewMode && ( +
+ 装箱规格表格模块 +
+
+
+ )} + +
+
+ 规格： +
+
+ +
+ {config.columns.map((column: any, index: number) => { + if (index === 0) { + return ( +
+   +
+ ); + } + + if ( + (column.dataIndex === 'boxType' && config.showBoxType) || + (column.dataIndex === 'quantity' && config.showQuantity) || + (column.dataIndex === 'unitPrice' && config.showUnitPrice) || + (column.dataIndex === 'amount' && config.showAmount) || + (column.dataIndex === 'unitWeight' && config.showUnitWeight) || + (column.dataIndex === 'weight' && config.showWeight) + ) { + return ( +
+ {column.title} +
+ ); + } + + return <>; + })} +
+
+ {config.data?.map((item: any, index: number) => ( +
0, + })} + > +
+ {item.boxCategory} +
+ + {config.showBoxType && ( +
+ {item.boxType} +
+ )} + + {config.showQuantity && ( +
+ {item.quantity} +
+ )} + + {config.showUnitPrice && ( +
+ {item.unitPrice} +
+ )} + + {config.showAmount && ( +
+ {item.amount} +
+ )} + + {config.showUnitWeight && ( +
+ {item.unitWeight} +
+ )} + + {config.showWeight && ( +
+ {item.weight} +
+ )} +
+ ))} + +
+
+ 总件数 +
+
+ {config.data?.reduce( + (acc: any, cur: any) => acc + Number(cur.quantity), + 0, + )} +
+
+
+
+ ); }; export default PackingSpecModule; diff --git a/packages/app-operation/src/components/Dealer/Module/PreviewCanvas.tsx b/packages/app-operation/src/components/Dealer/Module/PreviewCanvas.tsx index 2503a97..0ea0569 100644 --- a/packages/app-operation/src/components/Dealer/Module/PreviewCanvas.tsx +++ b/packages/app-operation/src/components/Dealer/Module/PreviewCanvas.tsx @@ -569,7 +569,6 @@ const PreviewCanvas: React.FC = ({ style={{ width: '21cm', margin: '0 auto', - height: 'calc(100vh - 280px)', }} >
diff --git a/packages/app-operation/src/components/Dealer/Module/ShippingInfoModule.tsx b/packages/app-operation/src/components/Dealer/Module/ShippingInfoModule.tsx index 25e9719..0891393 100644 --- a/packages/app-operation/src/components/Dealer/Module/ShippingInfoModule.tsx +++ b/packages/app-operation/src/components/Dealer/Module/ShippingInfoModule.tsx @@ -89,20 +89,20 @@ const ShippingInfoModule: React.FC = ({ > {config.showShippingFrom && ( <> -
+
发货地:
-
+
{config.shippingFrom}
)} {config.showDate && ( <> -
+
日期:
-
+
{config.date}
diff --git a/packages/app-operation/src/components/Dealer/Module/TitleModule.tsx b/packages/app-operation/src/components/Dealer/Module/TitleModule.tsx index 6b98a80..6e44ddf 100644 --- a/packages/app-operation/src/components/Dealer/Module/TitleModule.tsx +++ b/packages/app-operation/src/components/Dealer/Module/TitleModule.tsx @@ -87,8 +87,8 @@ const TitleModule: React.FC = ({
-
- {config.text} +
+ {config.title}
diff --git a/packages/app-operation/src/components/Dealer/Module/TotalAmountModule.tsx b/packages/app-operation/src/components/Dealer/Module/TotalAmountModule.tsx index 88c82fe..fcdad07 100644 --- a/packages/app-operation/src/components/Dealer/Module/TotalAmountModule.tsx +++ b/packages/app-operation/src/components/Dealer/Module/TotalAmountModule.tsx @@ -88,23 +88,23 @@ const TotalAmountModule: React.FC = ({
{config.showTotalAmount && ( <> -
+
{config.sumTitle || '合计金额'}:
-
+
{config.amount}
-
+
元
)} {config.showFarmer && ( <> -
+
瓜农:
-
+
{config.farmer}
diff --git a/packages/app-operation/src/components/Dealer/Module/VehicleInfoModule.tsx b/packages/app-operation/src/components/Dealer/Module/VehicleInfoModule.tsx index 2f8c372..4b1e49d 100644 --- a/packages/app-operation/src/components/Dealer/Module/VehicleInfoModule.tsx +++ b/packages/app-operation/src/components/Dealer/Module/VehicleInfoModule.tsx @@ -88,71 +88,65 @@ const VehicleInfoModule: React.FC = ({
{config.showDriverPhone && ( <> -
+
司机号码:
-
+
{config.driverPhone}
)} {config.showLicensePlate && ( <> -
+
车牌:
-
+
{config.licensePlate}
)} {config.showEstimatedArrivalTime && ( <> -
+
预计到仓时间:
-
+
{config.estimatedArrivalTime}
)} + {config.showRemarks && ( + <> +
+ 备注: +
+
+ {config.remarks} +
+ + )} {config.showFreightDebt && ( <> -
+
{config.freightDebtTitle || '运费欠'}:
-
+
{config.freightDebt}
)} {config.showStrawMatDebt && ( <> -
+
草帘欠:
-
+
{config.strawMatDebt}
)}
- {/*
*/} - {/*
*/} - {/* {config.showRemarks && (*/} - {/*
*/} - {/* */} - {/* 备注:*/} - {/* */} - {/*
*/} - {/* */} - {/* {config.remarks}*/} - {/* */} - {/*
*/} - {/*
*/} - {/* )}*/} - {/*
*/} - {/*
*/}
); }; diff --git a/packages/app-operation/src/components/Dealer/Module/WeightInfoModule.tsx b/packages/app-operation/src/components/Dealer/Module/WeightInfoModule.tsx index 0414f5f..8e99aed 100644 --- a/packages/app-operation/src/components/Dealer/Module/WeightInfoModule.tsx +++ b/packages/app-operation/src/components/Dealer/Module/WeightInfoModule.tsx @@ -84,104 +84,114 @@ const WeightInfoModule: React.FC = ({
)} -
- {config.showGrossWeight && ( - <> -
- 毛重: -
-
- {config.grossWeight} -
-
- 斤 -
- - )} - {config.showBoxWeight && ( - <> -
- 箱重: -
-
- {config.boxWeight} -
-
- 斤 -
- - )} - {config.showNetWeight && ( - <> -
- 净重: -
-
- {config.netWeight} -
-
- 斤 -
- - )} - {config.showUnitPrice && ( - <> -
- 单价: -
-
- {config.unitPrice} -
-
- 元/斤 -
- - )} - {config.showAmount && ( - <> -
- 金额: -
-
- {config.amount} -
-
- 元 -
- - )} - {config.showGrade && ( - <> -
- 品级: -
-
- {config.grade} -
- - )} + + {config.data?.map((item: any, index: number) => { + return ( +
+ {config.showNetWeight && ( +
+
+ 净重: +
+
+ {item.netWeight} +
+
+ {config.netWeightUnit === '1' ? '斤' : '公斤'} +
+
+ )} + {config.showBoxWeight && ( +
+
+ 箱重: +
+
+ {item.boxWeight} +
+
+ {config.boxWeightUnit === '1' ? '斤' : '公斤'} +
+
+ )} + {config.showGrossWeight && ( +
+
+ 毛重: +
+
+ {item.grossWeight} +
+
+ {config.grossWeightUnit === '1' ? '斤' : '公斤'} +
+
+ )} + {config.showUnitPrice && ( +
+
+ 单价: +
+
+ {item.unitPrice} +
+
+ {config.unitPriceUnit === '1' ? '元/斤' : '元/公斤'} +
+
+ )} + {config.showAmount && ( +
+
+ 金额: +
+
+ {item.amount} +
+
+ 元 +
+
+ )} + {config.showGrade && ( +
+
+ 品级: +
+
+ {item.grade} +
+
+ )} +
+ ); + })} +
{config.showAccountCompany && ( - <> -
+
+
入账公司:
-
+
{config.accountCompany}
- +
)} {config.showSumAmount && ( - <> -
+
+
总计:
-
+
{config.sumAmount}
-
+
元
- +
)}
diff --git a/packages/app-operation/src/global.less b/packages/app-operation/src/global.less index 0b87ce4..e77a37c 100644 --- a/packages/app-operation/src/global.less +++ b/packages/app-operation/src/global.less @@ -50,10 +50,27 @@ body::-webkit-scrollbar { .preview { width: 19cm; - table-layout: fixed; - td { - text-align: center; - vertical-align: middle; + div { + height: 1.1cm; } } +.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; +} diff --git a/packages/app-operation/src/locales/zh-CN.ts b/packages/app-operation/src/locales/zh-CN.ts index 3f11142..89e9ffa 100644 --- a/packages/app-operation/src/locales/zh-CN.ts +++ b/packages/app-operation/src/locales/zh-CN.ts @@ -671,6 +671,17 @@ export default { }, dealer: { + module: { + title: '标题模块', + dealerInfo: '经销商信息模块', + shippingInfo: '发货地信息模块', + weightInfo: '重量金额信息模块', + packingSpec: '装箱规格模块', + vehicleInfo: '车辆信息模块', + otherFees: '其他费用模块', + totalAmount: '合计金额模块', + otherInfo: '其他信息模块', + }, column: { shortName: '经销商简称', dealerPaymentAccountVOList: '付款账户', @@ -680,11 +691,11 @@ export default { 'enableShare.tooltip': '是否开启诚信志远分成', shareRatio: '分成比例', shareRatioTitle: '分成', - 'freightCostFlag': '运费成本', + freightCostFlag: '运费成本', 'freightCostFlag.tooltip': '运费是否作为成本', - 'strawMatCostFlag': '草帘成本', + strawMatCostFlag: '草帘成本', 'strawMatCostFlag.tooltip': '草帘是否作为成本', - 'includePackingFlag': '含包装费', + includePackingFlag: '含包装费', 'includePackingFlag.tooltip': '发货单合计金额是否含包装费', documentTypes: '单据类型', remark: '备注',