d17eb56a4d
- 将模块库、预览画布和配置面板拆分为独立组件 - 简化页面主组件结构，移除大量内联样式和冗余代码 - 新增 PrintPreview 组件用于模板打印预览 - 更新装箱规格表格数据结构，增加箱类字段 - 扩展车辆信息和合计金额模块的配置选项 - 优化导入语句，仅保留必要的第三方组件引用 - 移除 react-beautiful-dnd 拖拽相关依赖和实现 - 导出 DeliveryTemplate 组件供其他模块使用
102 lines
2.8 KiB
TypeScript
102 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { Button, Typography } from 'antd';
|
|
import {
|
|
MenuOutlined,
|
|
ArrowUpOutlined,
|
|
ArrowDownOutlined,
|
|
DeleteOutlined
|
|
} from '@ant-design/icons';
|
|
|
|
const { Text } = Typography;
|
|
|
|
interface ModuleProps {
|
|
config: any;
|
|
isSelected: boolean;
|
|
onSelect: () => void;
|
|
onDelete: () => void;
|
|
onMoveUp?: () => void;
|
|
onMoveDown?: () => void;
|
|
canMoveUp?: boolean;
|
|
canMoveDown?: boolean;
|
|
}
|
|
|
|
const DealerInfoModule: React.FC<ModuleProps> = ({
|
|
config,
|
|
isSelected,
|
|
onSelect,
|
|
onDelete,
|
|
onMoveUp,
|
|
onMoveDown,
|
|
canMoveUp,
|
|
canMoveDown,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`border border-gray-300 rounded p-2 mb-2 bg-white transition-all duration-200 ${
|
|
isSelected ? 'border-2 border-blue-500 shadow-[0_0_0_2px_rgba(24,144,255,0.2)]' : 'hover:border-blue-300'
|
|
}`}
|
|
onClick={onSelect}
|
|
>
|
|
<div className="flex justify-between items-center mb-2 pb-2 border-b border-gray-100">
|
|
<Text strong>经销商信息模块</Text>
|
|
<div className="flex gap-1">
|
|
<Button
|
|
type="text"
|
|
icon={<MenuOutlined />}
|
|
size="small"
|
|
style={{ cursor: 'move' }}
|
|
/>
|
|
<Button
|
|
type="text"
|
|
icon={<ArrowUpOutlined />}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (onMoveUp) onMoveUp();
|
|
}}
|
|
size="small"
|
|
disabled={!canMoveUp}
|
|
/>
|
|
<Button
|
|
type="text"
|
|
icon={<ArrowDownOutlined />}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (onMoveDown) onMoveDown();
|
|
}}
|
|
size="small"
|
|
disabled={!canMoveDown}
|
|
/>
|
|
<Button
|
|
type="text"
|
|
icon={<DeleteOutlined />}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onDelete();
|
|
}}
|
|
danger
|
|
size="small"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="py-2 text-center flex flex-col gap-2.5">
|
|
<div className="flex justify-around w-[70%] font-bold text-lg leading-8 border-b border-black py-0 px-2.5 my-0 mx-auto">
|
|
{config.showDealerName && (
|
|
<span className="px-2.5 min-w-[80px] text-center inline-block">{config.dealerName}</span>
|
|
)}
|
|
{config.showWatermelonGrade && (
|
|
<span className="px-2.5 min-w-[80px] text-center inline-block">{config.watermelonGrade}</span>
|
|
)}
|
|
{config.showDestination && (
|
|
<span className="px-2.5 min-w-[80px] text-center inline-block">{config.destination}</span>
|
|
)}
|
|
{config.showVehicleNumber && (
|
|
<span className="px-2.5 min-w-[80px] text-center inline-block">{config.vehicleNumber}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DealerInfoModule;
|