ONE-OS/ONEOS-web/ERP/订单管理.jsx

// 【重要】必须使用 const Component 作为组件变量名
// ONEOS-web 示例项目 - ERP 订单管理

const Component = function () {
	var useState = React.useState;

	var antd = window.antd;
	var Table = antd.Table;
	var Button = antd.Button;
	var Card = antd.Card;
	var Space = antd.Space;
	var Input = antd.Input;
	var Breadcrumb = antd.Breadcrumb;
	var Menu = antd.Menu;
	var Layout = antd.Layout;
	var message = antd.message;
	var Tag = antd.Tag;
	var Header = Layout.Header;
	var Content = Layout.Content;

	var _currentMenu = useState('erp');
	var currentMenu = _currentMenu[0];
	var setCurrentMenu = _currentMenu[1];

	var handleMenuClick = function (e) {
		setCurrentMenu(e.key);
		if (e.key === 'contract') {
			message.info('跳转至 合同列表');
			window.location.hash = '合同列表';
		} else if (e.key === 'crm') {
			message.info('跳转至 CRM 客户管理');
			window.location.hash = '客户列表';
		} else if (e.key === 'asset') {
			message.info('跳转至 资产概览');
			window.location.hash = '资产概览';
		}
	};

	var columns = [
		{ title: '订单编号', dataIndex: 'orderNo', key: 'orderNo' },
		{ title: '关联客户', dataIndex: 'customer', key: 'customer' },
		{ title: '产品/服务', dataIndex: 'product', key: 'product' },
		{ title: '数量', dataIndex: 'quantity', key: 'quantity' },
		{ title: '总金额(元)', dataIndex: 'amount', key: 'amount' },
		{ title: '状态', dataIndex: 'status', key: 'status', render: function(text) {
			var color = text === '已发货' ? 'blue' : text === '已完成' ? 'green' : 'orange';
			return React.createElement(Tag, { color: color }, text);
		} },
		{
			title: '操作',
			key: 'action',
			render: function (_, record) {
				return React.createElement(Space, null,
					React.createElement(Button, { type: 'link', size: 'small', onClick: function() { message.info('查看订单: ' + record.orderNo); } }, '详情'),
					React.createElement(Button, { type: 'link', size: 'small', onClick: function() { message.success('更新发货状态'); } }, '更新状态')
				);
			}
		}
	];

	var data = [
		{ key: '1', orderNo: 'ORD-20260401', customer: '嘉兴某物流公司', product: '氢能重卡租赁(月)', quantity: 5, amount: '150,000.00', status: '待发货' },
		{ key: '2', orderNo: 'ORD-20260405', customer: '上海某科技公司', product: '氢燃料补给服务', quantity: 1, amount: '12,000.00', status: '已完成' },
		{ key: '3', orderNo: 'ORD-20260410', customer: '杭州某实业公司', product: '氢能轻卡租赁(年)', quantity: 2, amount: '240,000.00', status: '已发货' }
	];

	var layoutStyle = { minHeight: '100vh', background: '#f5f5f5' };
	var headerStyle = { background: '#fff', padding: '0 24px', display: 'flex', alignItems: 'center', boxShadow: '0 2px 8px rgba(0,0,0,0.06)', zIndex: 1 };
	var logoStyle = { fontSize: '20px', fontWeight: 'bold', color: '#1677ff', marginRight: '48px' };

	var menuItems = [
		{ key: 'contract', label: '合同管理' },
		{ key: 'crm', label: 'CRM 客户管理' },
		{ key: 'erp', label: 'ERP 订单管理' },
		{ key: 'asset', label: '资产管理' }
	];

	return React.createElement(Layout, { style: layoutStyle },
		React.createElement(Header, { style: headerStyle },
			React.createElement('div', { style: logoStyle }, 'ONEOS 运管平台'),
			React.createElement(Menu, { mode: 'horizontal', selectedKeys: [currentMenu], items: menuItems, onClick: handleMenuClick, style: { flex: 1, borderBottom: 'none' } })
		),
		React.createElement(Content, { style: { padding: '24px 48px' } },
			React.createElement(Breadcrumb, { style: { marginBottom: '16px' }, items: [{ title: '系统应用' }, { title: 'ERP' }, { title: '订单管理' }] }),
			React.createElement(Card, { title: '业务订单', style: { borderRadius: '8px' } },
				React.createElement('div', { style: { marginBottom: 16, display: 'flex', gap: 16 } },
					React.createElement(Input, { placeholder: '输入订单编号搜索', style: { width: 200 } }),
					React.createElement(Button, { type: 'primary' }, '查询'),
					React.createElement('div', { style: { flex: 1 } }),
					React.createElement(Button, { type: 'primary', onClick: function() { message.info('新建订单（打开抽屉）'); } }, '新建订单')
				),
				React.createElement(Table, { columns: columns, dataSource: data, pagination: { pageSize: 10 } })
			)
		)
	);
};

if (typeof module !== 'undefined' && module.exports) module.exports = Component;