e70342e8fe
- 财务管理：新增提车应收款-收款.jsx，移除旧提车应收款/收费明细/首付款页面；项目信息与开票信息改为直接展示 - 车辆租赁合同：列表租赁车辆数/已交车辆数及气泡列调整；续签/转正式合同去除合同编码，交车区域·交车地点·合同原件布局调整 - 运维-车辆业务：新增替换车管理、替换车管理-新增/查看/编辑 Made-with: Cursor
204 lines
13 KiB
JavaScript
204 lines
13 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 运维管理 - 车辆业务 - 替换车管理 - 查看（2026年3月3日版本）
|
||
|
||
const Component = function () {
|
||
var useState = React.useState;
|
||
|
||
var antd = window.antd;
|
||
var Breadcrumb = antd.Breadcrumb;
|
||
var Card = antd.Card;
|
||
var Input = antd.Input;
|
||
var Button = antd.Button;
|
||
var Modal = antd.Modal;
|
||
|
||
var requirementModalVisible = useState(false);
|
||
var setRequirementModalVisible = requirementModalVisible[1];
|
||
|
||
// 模拟：根据已填信息反查的一条替换车记录（实际由路由参数或接口拉取）
|
||
var detail = useState({
|
||
projectName: '嘉兴氢能示范项目',
|
||
contractCode: 'HT-ZL-2025-001',
|
||
customerName: '嘉兴某某物流有限公司',
|
||
contactPerson: '张三',
|
||
signDate: '2025-01-15',
|
||
contactPhone: '13800138001',
|
||
businessDept: '业务1部',
|
||
businessPerson: '张经理',
|
||
replaceType: '永久替换',
|
||
replaceReason: '车辆原因',
|
||
replaceReasonDesc: '原车故障需维修，临时用替换车保障客户用车。',
|
||
originalPlate: '浙A12345',
|
||
originalVin: 'LGHXCAE28M1234567',
|
||
originalBrand: '东风',
|
||
originalModel: 'DFH1180',
|
||
replacePlate: '浙A67890',
|
||
replaceVin: 'LGHXCAE28M6789012',
|
||
replaceBrand: '福田',
|
||
replaceModel: 'BJ1180'
|
||
});
|
||
var data = detail[0];
|
||
|
||
var handleBack = function () {
|
||
// 返回替换车管理列表页（实际为路由或平台跳转）
|
||
if (window.__replaceCarBack) {
|
||
window.__replaceCarBack();
|
||
} else {
|
||
antd.message.info('返回替换车管理列表（原型）');
|
||
}
|
||
};
|
||
|
||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||
var cardStyle = { marginBottom: 16 };
|
||
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||
var formRowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', marginBottom: 16 };
|
||
var formItemStyle = { marginBottom: 12 };
|
||
|
||
// 审批情况（参照车辆租赁合同-查看顶部审批状态）
|
||
var approvalSteps = [
|
||
{ title: '业务部主管', person: '姚守涛', status: '已通过', approveTime: '2026-02-20 09:30' },
|
||
{ title: '事业部主管', person: '尚建华', status: '已通过', approveTime: '2026-02-20 10:15' },
|
||
{ title: '运维主管', person: '王运维', status: '已通过', approveTime: '2026-02-20 11:00' }
|
||
];
|
||
var approvalCardStyle = { backgroundColor: '#fff', borderRadius: 8, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' };
|
||
var approvalHeaderStyle = { padding: '16px 20px', borderBottom: '1px solid #f0f0f0', fontSize: 16, fontWeight: 600, color: '#333', textAlign: 'center' };
|
||
var approvalBodyStyle = { padding: '24px 20px', display: 'flex', justifyContent: 'center' };
|
||
var stepWrapStyle = { display: 'flex', alignItems: 'flex-start', flexWrap: 'wrap', justifyContent: 'center' };
|
||
var stepItemStyle = { flex: '1 1 0', minWidth: 140, maxWidth: 220, textAlign: 'center', position: 'relative' };
|
||
var stepIconStyle = { width: 32, height: 32, borderRadius: '50%', margin: '0 auto 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 600, backgroundColor: '#52c41a', color: '#fff' };
|
||
var stepLineStyle = { position: 'absolute', top: 16, left: '50%', right: '-50%', height: 2, backgroundColor: '#52c41a', zIndex: 0 };
|
||
var stepTitleStyle = { fontSize: 13, color: '#333', fontWeight: 500, marginBottom: 4 };
|
||
var stepDescStyle = { fontSize: 12, color: '#666' };
|
||
var stepStatusStyle = { fontSize: 12, color: '#52c41a', marginTop: 4 };
|
||
var stepTimeStyle = { fontSize: 12, color: '#999', marginTop: 2 };
|
||
var requirementContent = '替换车管理-查看（2026年3月3日版本）\n一个「数字化资产ONEOS运管平台」中的「运维管理」「车辆业务」「替换车管理」「查看」模块\n1.面包屑：\n#运维管理-车辆业务-替换车管理-查看\n页面由选择项目、替换车详情、两个单独卡片组成；\n\n2.选择项目：\n#可通过选择进行中的车辆租赁合同，拉取租赁合同中对应车辆进行替换；\n2.1.项目名称：根据已填信息反查，不可编辑；\n2.2.合同编码：根据项目名称自动反查，不可编辑；\n2.3.客户名称：根据项目名称自动反查，不可编辑；\n2.4.对接人：根据项目名称自动反查，不可编辑；\n2.5.合同签订时间：根据项目名称自动反查，不可编辑；\n2.6.客户联系电话：根据项目名称自动反查，不可编辑；\n2.7.业务部门：根据项目名称自动反查，不可编辑；\n2.8.业务人员：根据项目名称自动反查，不可编辑；\n\n3.替换车详情：\n3.1.替换类型：选择器，根据已填信息反查，不可编辑；\n 3.1.1.类型为永久替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），由运维手动将被替换车进行还车；\n 3.1.2.类型为临时替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），被替换车不用还车，在被替换车重新交付客户时，由运维手动将替换车进行还车；\n 重新生成交车任务时，交车地点会自动继承自合同，由对应区域运维人员才能操作；\n 交车任务完成后，所有涉及到被替换车辆显示（例如车辆租赁合同、租赁账单、提车应收款等功能）会替换为新替换车的对应信息，如果是临时替换，在新替换车完成还车后，对应车辆记录会恢复为原有车辆数据。如果是永久替换，则由运维自主进行被替换车辆还车；\n3.2.替换原因：选择器，根据已填信息反查，不可编辑；\n3.3.替换原因说明：文本域，根据已填信息反查，不可编辑；\n3.4.被替换车牌号：选择器，根据已填信息反查，不可编辑；\n3.5.被替换车识别代码：输入框（禁用），选择被替换车车牌号后自动反写该车识别代码；\n3.6.被替换车品牌：输入框（禁用），选择被替换车车牌号后自动反写该车品牌；\n3.7.被替换车型号：输入框（禁用），选择被替换车车牌号后自动反写该车型号；\n3.8.替换车车牌号：选择器，根据已填信息反查，不可编辑；\n3.9.替换车识别代码：输入框（禁用），选择替换车车牌号后自动反写该车识别代码；\n3.10.替换车品牌：输入框（禁用），选择替换车车牌号后自动反写该车品牌；\n3.11.替换车型号：输入框（禁用），选择替换车车牌号后自动反写该车型号；\n\n下方为返回按钮；\n4.1.点击返回，返回替换车管理列表页；';
|
||
var approvalStepEls = approvalSteps.map(function (step, index) {
|
||
var isLast = index === approvalSteps.length - 1;
|
||
return React.createElement('div', { key: index, style: Object.assign({}, stepItemStyle, { zIndex: approvalSteps.length - index }) },
|
||
!isLast ? React.createElement('div', { style: stepLineStyle }) : null,
|
||
React.createElement('div', { style: stepIconStyle }, '✓'),
|
||
React.createElement('div', { style: stepTitleStyle }, step.title),
|
||
React.createElement('div', { style: stepDescStyle }, step.person),
|
||
React.createElement('div', { style: stepStatusStyle }, step.status),
|
||
step.approveTime ? React.createElement('div', { style: stepTimeStyle }, step.approveTime) : null
|
||
);
|
||
});
|
||
|
||
return React.createElement('div', { style: layoutStyle },
|
||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
|
||
React.createElement(Breadcrumb, {
|
||
items: [
|
||
{ title: '运维管理' },
|
||
{ title: '车辆业务' },
|
||
{ title: '替换车管理' },
|
||
{ title: '查看' }
|
||
]
|
||
}),
|
||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalVisible(true); } }, '查看需求说明')
|
||
),
|
||
React.createElement('div', { style: approvalCardStyle },
|
||
React.createElement('div', { style: approvalHeaderStyle }, '审批情况'),
|
||
React.createElement('div', { style: approvalBodyStyle },
|
||
React.createElement('div', { style: stepWrapStyle }, approvalStepEls)
|
||
)
|
||
),
|
||
React.createElement(Card, { title: '选择项目', style: cardStyle },
|
||
React.createElement('div', { style: formRowStyle },
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '项目名称'),
|
||
React.createElement(Input, { value: data.projectName || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '合同编码'),
|
||
React.createElement(Input, { value: data.contractCode || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '客户名称'),
|
||
React.createElement(Input, { value: data.customerName || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '对接人'),
|
||
React.createElement(Input, { value: data.contactPerson || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '合同签订时间'),
|
||
React.createElement(Input, { value: data.signDate || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '客户联系电话'),
|
||
React.createElement(Input, { value: data.contactPhone || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '业务部门'),
|
||
React.createElement(Input, { value: data.businessDept || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '业务人员'),
|
||
React.createElement(Input, { value: data.businessPerson || '', disabled: true })
|
||
)
|
||
)
|
||
),
|
||
React.createElement(Card, { title: '替换车详情', style: cardStyle },
|
||
React.createElement('div', { style: formRowStyle },
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '替换类型'),
|
||
React.createElement(Input, { value: data.replaceType || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '替换原因'),
|
||
React.createElement(Input, { value: data.replaceReason || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) },
|
||
React.createElement('div', { style: labelStyle }, '替换原因说明'),
|
||
React.createElement(Input.TextArea, { value: data.replaceReasonDesc || '', disabled: true, rows: 3, style: { width: '100%' } })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '被替换车牌号'),
|
||
React.createElement(Input, { value: data.originalPlate || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '被替换车识别代码'),
|
||
React.createElement(Input, { value: data.originalVin || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '被替换车品牌'),
|
||
React.createElement(Input, { value: data.originalBrand || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '被替换车型号'),
|
||
React.createElement(Input, { value: data.originalModel || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: { gridColumn: '1 / -1', width: '100%' } }),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '替换车车牌号'),
|
||
React.createElement(Input, { value: data.replacePlate || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '替换车识别代码'),
|
||
React.createElement(Input, { value: data.replaceVin || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '替换车品牌'),
|
||
React.createElement(Input, { value: data.replaceBrand || '', disabled: true })
|
||
),
|
||
React.createElement('div', { style: formItemStyle },
|
||
React.createElement('div', { style: labelStyle }, '替换车型号'),
|
||
React.createElement(Input, { value: data.replaceModel || '', disabled: true })
|
||
)
|
||
),
|
||
React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 24 } },
|
||
React.createElement(Button, { onClick: handleBack }, '返回')
|
||
)
|
||
),
|
||
React.createElement(Modal, {
|
||
title: '需求说明',
|
||
open: requirementModalVisible[0],
|
||
onCancel: function () { setRequirementModalVisible(false); },
|
||
width: 720,
|
||
footer: React.createElement(Button, { onClick: function () { setRequirementModalVisible(false); } }, '关闭'),
|
||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||
}, React.createElement('div', { style: { padding: '8px 0' } },
|
||
React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
|
||
)
|
||
);
|
||
};
|