671640603c
- 新增/编辑/查看交车任务：品牌前增加序号列，与租赁合同车辆序号对应，需求说明同步更新 - 业务管理：新增客户管理.jsx（筛选+列表+查看/编辑/删除），筛选展开收起对齐租赁合同管理 - 业务管理：新增车辆成本维护.jsx（级联筛选、租赁/自营日成本、编辑） - 需求说明：提车应收款文档微调 Made-with: Cursor
140 lines
9.2 KiB
JavaScript
140 lines
9.2 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名 - Axhub 产品原型
|
||
// 数字化资产ONEOS运管平台 - 查看交车任务模块（只读，布局参照新增交车任务）
|
||
|
||
const Component = function() {
|
||
var antd = window.antd;
|
||
var Input = antd.Input;
|
||
var Button = antd.Button;
|
||
var Modal = antd.Modal;
|
||
|
||
var reqModalOpen = React.useState(false);
|
||
|
||
// Mock：当前查看的交车任务详情（从列表跳转带入或根据 id 拉取）
|
||
var task = {
|
||
projectName: '嘉兴某某物流氢能运输项目',
|
||
contractCode: 'JXZL20260216YW101235A',
|
||
customerName: '嘉兴某某物流有限公司',
|
||
deliveryRegion: '浙江省 / 嘉兴市',
|
||
deliveryLocation: '浙江省嘉兴市南湖区科技大道1号',
|
||
planDeliveryDisplay: '2026-03-01至2026-03-05',
|
||
billingStartDate: '2026-03-06',
|
||
vehicles: [
|
||
{ seq: 1, brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '首车' },
|
||
{ seq: 2, brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '待上牌' },
|
||
{ seq: 3, brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙F20001', vin: 'ZZ4257N386FZ12345', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '' }
|
||
]
|
||
};
|
||
|
||
var vehicleList = task.vehicles || [];
|
||
|
||
var styles = {
|
||
page: { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', fontSize: 14 },
|
||
breadcrumb: { marginBottom: 16, color: '#666' },
|
||
breadcrumbSep: { margin: '0 8px', color: '#999' },
|
||
card: { backgroundColor: '#fff', borderRadius: 8, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' },
|
||
cardHeader: { padding: '16px 20px', borderBottom: '1px solid #f0f0f0' },
|
||
cardTitle: { fontSize: 16, fontWeight: 600, color: '#333' },
|
||
cardBody: { padding: '20px 24px' },
|
||
formRow: { display: 'flex', flexWrap: 'wrap', marginBottom: 16 },
|
||
formCol: { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8 },
|
||
label: { display: 'block', marginBottom: 6, color: '#333' },
|
||
inputDisabled: { width: '100%', padding: '6px 10px', border: '1px solid #d9d9d9', borderRadius: 4, backgroundColor: '#f5f5f5', color: '#666', fontSize: 13 },
|
||
footer: { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, justifyContent: 'flex-start', zIndex: 99 },
|
||
tableWrap: { marginTop: 16, overflowX: 'auto' },
|
||
table: { width: '100%', borderCollapse: 'collapse', fontSize: 13 },
|
||
th: { padding: '10px 8px', textAlign: 'left', borderBottom: '1px solid #e8e8e8', backgroundColor: '#fafafa', fontWeight: 600 },
|
||
td: { padding: '8px', borderBottom: '1px solid #f0f0f0', verticalAlign: 'middle' }
|
||
};
|
||
|
||
var FormItemReadOnly = function(props) {
|
||
return React.createElement('div', { style: styles.formCol },
|
||
React.createElement('label', { style: styles.label }, props.label),
|
||
React.createElement(Input, { value: props.value != null ? props.value : '', disabled: true, style: styles.inputDisabled })
|
||
);
|
||
};
|
||
|
||
var formRow1 = React.createElement('div', { style: styles.formRow },
|
||
React.createElement(FormItemReadOnly, { label: '选择项目名称', value: task.projectName }),
|
||
React.createElement(FormItemReadOnly, { label: '合同编码', value: task.contractCode }),
|
||
React.createElement(FormItemReadOnly, { label: '客户名称', value: task.customerName }),
|
||
React.createElement(FormItemReadOnly, { label: '交车区域', value: task.deliveryRegion }),
|
||
React.createElement(FormItemReadOnly, { label: '交车地点', value: task.deliveryLocation })
|
||
);
|
||
|
||
var formRow2 = React.createElement('div', { style: styles.formRow },
|
||
React.createElement(FormItemReadOnly, { label: '预计交车日期', value: task.planDeliveryDisplay }),
|
||
React.createElement(FormItemReadOnly, { label: '开始计费日期', value: task.billingStartDate })
|
||
);
|
||
|
||
var tableHeader = React.createElement('thead', null,
|
||
React.createElement('tr', null,
|
||
React.createElement('th', { style: Object.assign({}, styles.th, { width: 56 }) }, '序号'),
|
||
React.createElement('th', { style: styles.th }, '品牌'),
|
||
React.createElement('th', { style: styles.th }, '型号'),
|
||
React.createElement('th', { style: styles.th }, '车牌号'),
|
||
React.createElement('th', { style: styles.th }, '车辆识别代码'),
|
||
React.createElement('th', { style: styles.th }, '车辆月租金'),
|
||
React.createElement('th', { style: styles.th }, '服务费'),
|
||
React.createElement('th', { style: styles.th }, '保证金'),
|
||
React.createElement('th', { style: styles.th }, '备注')
|
||
)
|
||
);
|
||
|
||
var tableBody = React.createElement('tbody', null,
|
||
vehicleList.length === 0
|
||
? React.createElement('tr', null, React.createElement('td', { colSpan: 9, style: Object.assign({}, styles.td, { textAlign: 'center', color: '#999' }) }, '暂无车辆'))
|
||
: vehicleList.map(function(row, i) {
|
||
return React.createElement('tr', { key: i },
|
||
React.createElement('td', { style: styles.td }, row.seq != null ? row.seq : '—'),
|
||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.brand, disabled: true, style: styles.inputDisabled })),
|
||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.model, disabled: true, style: styles.inputDisabled })),
|
||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.plateNo || '-', disabled: true, style: styles.inputDisabled })),
|
||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.vin, disabled: true, style: styles.inputDisabled })),
|
||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.monthRent + '元', disabled: true, style: styles.inputDisabled })),
|
||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.serviceFee + '元', disabled: true, style: styles.inputDisabled })),
|
||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.deposit + '元', disabled: true, style: styles.inputDisabled })),
|
||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.remark || '-', disabled: true, style: styles.inputDisabled }))
|
||
);
|
||
})
|
||
);
|
||
|
||
var tableEl = React.createElement('div', { style: styles.tableWrap },
|
||
React.createElement('table', { style: styles.table }, tableHeader, tableBody)
|
||
);
|
||
|
||
var handleBack = function() {
|
||
if (window.history && window.history.back) window.history.back();
|
||
else antd.message.info('返回');
|
||
};
|
||
|
||
var reqSpecText = '查看交车任务\n一个「数字化资产ONEOS运管平台」中的「交车任务」「查看」模块。\n\n1.面包屑：业务管理-交车任务-查看交车任务\n\n2.表单（只读）：项目名称、合同编码、客户名称、交车区域、交车地点、预计交车日期、开始计费日期等，根据交车任务数据反显。\n\n3.车辆列表（只读）：\n3.1.序号：与租赁合同车辆序号对应；\n3.2.品牌、型号、车牌号、车辆识别代码、车辆月租金、服务费、保证金、备注。\n\n4.底部为返回按钮。';
|
||
|
||
return React.createElement('div', { style: styles.page },
|
||
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
|
||
React.createElement('div', { style: styles.breadcrumb },
|
||
React.createElement('span', null, '业务管理'),
|
||
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
||
React.createElement('span', null, '交车任务'),
|
||
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
||
React.createElement('span', { style: { color: '#1890ff' } }, '查看交车任务')),
|
||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function() { reqModalOpen[1](true); } }, '查看需求说明')),
|
||
React.createElement('div', { style: styles.card },
|
||
React.createElement('div', { style: styles.cardHeader }, React.createElement('span', { style: styles.cardTitle }, '交车任务')),
|
||
React.createElement('div', { style: styles.cardBody },
|
||
formRow1,
|
||
formRow2,
|
||
tableEl)),
|
||
React.createElement('div', { style: { height: 60 } }),
|
||
React.createElement('div', { style: styles.footer },
|
||
React.createElement(Button, { onClick: handleBack }, '返回')),
|
||
React.createElement(Modal, {
|
||
title: '需求说明',
|
||
open: reqModalOpen[0],
|
||
onCancel: function() { reqModalOpen[1](false); },
|
||
width: 560,
|
||
footer: React.createElement(Button, { onClick: function() { reqModalOpen[1](false); } }, '关闭'),
|
||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||
}, React.createElement('div', { style: { padding: '8px 0', whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, reqSpecText))
|
||
);
|
||
};
|